Vue Shadcn - Resizable with Table

How to make it resizable with table?

How can I make the table resizable? For example, if I resize the <th> or <td> of the first column, all <td> or <th> elements in the first row should automatically resize as well.

Here is result of code : https://files.fm/f/hsx76ae73n

Here is my code:

<script setup lang="ts">
import { ref } from 'vue';
import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';

import {
  ResizablePanel,
  ResizablePanelGroup,
  ResizableHandle,
} from '@/components/ui/resizable';

const invoices = [
  { invoice: 'INV001', paymentStatus: 'Paid', totalAmount: '$250.00', paymentMethod: 'Credit Card' },
  { invoice: 'INV002', paymentStatus: 'Pending', totalAmount: '$150.00', paymentMethod: 'PayPal' },
  { invoice: 'INV003', paymentStatus: 'Unpaid', totalAmount: '$350.00', paymentMethod: 'Bank Transfer' },
  { invoice: 'INV004', paymentStatus: 'Paid', totalAmount: '$450.00', paymentMethod: 'Credit Card' },
  { invoice: 'INV005', paymentStatus: 'Paid', totalAmount: '$550.00', paymentMethod: 'PayPal' },
  { invoice: 'INV006', paymentStatus: 'Pending', totalAmount: '$200.00', paymentMethod: 'Bank Transfer' },
  { invoice: 'INV007', paymentStatus: 'Unpaid', totalAmount: '$300.00', paymentMethod: 'Credit Card' },
];



</script>

<template>
  <div class="w-[50%] m-auto">
    <Table>
      <TableCaption>A list of your recent invoices.</TableCaption>
      <TableHeader>
        <TableRow>
          <ResizablePanelGroup direction="horizontal">
            <ResizablePanel>
              <TableHead>
                <span>Invoice</span>
              </TableHead>
            </ResizablePanel>
            
            <ResizableHandle />

            <ResizablePanel>
              <TableHead>
                <span>Payment Status</span>
              </TableHead>
            </ResizablePanel>
            <ResizableHandle/>

            <ResizablePanel>
              <TableHead>
                <span>Payment Method</span>
              </TableHead>
            </ResizablePanel>
            <ResizableHandle/>

            <ResizablePanel>
              <TableHead>
                <span>Total Amount</span>
              </TableHead>
            </ResizablePanel>
            <ResizableHandle />
          </ResizablePanelGroup>
        </TableRow>
      </TableHeader>

      <TableBody>
        <TableRow v-for="(invoice, index) in invoices" :key="invoice.invoice">
          <ResizablePanelGroup direction="horizontal">
            <ResizablePanel>
              <TableCell class="font-medium">
                {{ invoice.invoice }}
              </TableCell>
            </ResizablePanel>

            <ResizableHandle />

            <ResizablePanel>
              <TableCell>
                {{ invoice.paymentStatus }}
              </TableCell>
            </ResizablePanel>

            <ResizableHandle />

            <ResizablePanel>
              <TableCell>
                {{ invoice.paymentMethod }}
              </TableCell>
            </ResizablePanel>

            <ResizableHandle />

            <ResizablePanel>
              <TableCell class="text-right">
                {{ invoice.totalAmount }}
              </TableCell>
            </ResizablePanel>
          </ResizablePanelGroup>
        </TableRow>
      </TableBody>
    </Table>
  </div>
</template>