Resize cell table

[Kokleng-Dev]

How to implement resizable with Table and effect to child (tbody > td).

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

import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} 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>Invoice</span>
                    </TableHead>
                </ResizablePanel>

                <ResizableHandle/>


                <ResizablePanel>
                    <TableHead>
                        <span>Invoice</span>
                    </TableHead>
                </ResizablePanel>

                <ResizableHandle/>


                <ResizablePanel>
                    <TableHead>
                        <span>Invoice</span>
                    </TableHead>
                </ResizablePanel>

                <ResizableHandle/>
            </ResizablePanelGroup>
          </TableRow>
        </TableHeader>
        <TableBody>
          <TableRow v-for="invoice in invoices" :key="invoice.invoice">
            <TableCell class="font-medium">
              {{ invoice.invoice }}
            </TableCell>
            <TableCell>{{ invoice.paymentStatus }}</TableCell>
            <TableCell>{{ invoice.paymentMethod }}</TableCell>
            <TableCell class="text-right">
              {{ invoice.totalAmount }}
            </TableCell>
          </TableRow>
        </TableBody>
      </Table>
    </div>
  </template>
  
  

Screen.Recording.2024-10-01.at.10.46.06.at.night.mov

[sadeghbarati]

https://stackblitz.com/edit/nordhealth-advanced-table-examples-ms9wnv?file=src%2FDataTable%2FResizeHandle.tsx

Hi, Check this Stackblitz

[Kokleng-Dev]

My Update Code but still can not resize.

<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>

Screen.Recording.2024-10-01.at.11.00.47.at.night.mp4

[sadeghbarati]

Althought the Stackblitz example is using React, you can find you answer in there, please check it carefully

[Saeid-Za]

It could be helpful to include an example of this use case on the website. If you agree, I'll prepare a pull request shortly.