Designing a Responsive Table Layout

Show how to design a responsive table using React TanStack Table combined with React Bootstrap classes to ensure the table looks good on all device sizes.

import { useReactTable } from '@tanstack/react-table';
import { Table } from 'react-bootstrap';
import React from 'react';

Import necessary libraries. TanStack Table for table logic and React Bootstrap for styling.

const data = React.useMemo(() => [
  // Define your data here
], []);

Define a memoized data array to pass into the table.

const columns = React.useMemo(() => [
  // Define your columns here
], []);

Define a memoized columns array which includes header and accessor, which ties the column to the specific data key.

const tableInstance = useReactTable({
  data,
  columns,
});

Instantiate the table using useReactTable hook with the defined data and columns.

return (
  <Table striped bordered hover size="sm" responsive>
    <thead>
      {tableInstance.getHeaderGroups().map(headerGroup => (
        <tr key={headerGroup.id}>
          {headerGroup.headers.map(column => (
            <th key={column.id}>{column.render('Header')}</th>
          ))}
        </tr>
      ))}
    </thead>
    <tbody>
      {tableInstance.getRowModel().rows.map(row => (
        <tr key={row.id}>
          {row.getVisibleCells().map(cell => (
            <td key={cell.id}>{cell.render('Cell')}</td>
          ))}
        </tr>
      ))}
    </tbody>
  </Table>
);

Render the responsive table with React Bootstrap's Table component, integrating TanStack Table logic for rendering the header and body.