Implementing a Full-Width TanStack Table

Demonstrate how to make a TanStack Table fill the width of its container using CSS and React props.

import { useReactTable, flexRender, getCoreRowModel } from '@tanstack/react-table';

Imports necessary functions from TanStack Table.

const table = useReactTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
  defaultColumn: {
    size: 100
  }
});

Initializes the table with data and columns. The defaultColumn property sets a default size for all columns, allowing the table to be responsive within its container.

<div style={{ width: '100%', overflow: 'auto' }}>
  <table style={{ width: '100%', borderCollapse: 'collapse' }}>
    <thead>
      {table.getHeaderGroups().map(headerGroup => (
        <tr key={headerGroup.id}>
          {headerGroup.headers.map(header => (
            <th key={header.id} style={{ width: header.column.getSize() }}>
              {flexRender(header.column.columnDef.header, header.getContext())}
            </th>
          ))}
        </tr>
      ))}
    </thead>
    <tbody>
      {table.getRowModel().rows.map(row => (
        <tr key={row.id}>
          {row.getVisibleCells().map(cell => (
            <td key={cell.id}>
              {flexRender(cell.column.columnDef.cell, cell.getContext())}
            </td>
          ))}
        </tr>
      ))}
    </tbody>
  </table>
</div>

Renders the table within a div that takes the full width of its container. Each column's width is dynamically set based on the specified column size, allowing the table to fill the width of its container. The flexRender function is used for flexible rendering.