Blog>
Snippets

Implementing Basic Row Grouping

Demonstrate how to group rows based on a specific property in React TanStack Table, including the initial setup and configuration for row grouping.
import { useTable, useGroupBy } from '@tanstack/react-table';
Import necessary hooks from TanStack Table.
import React from 'react';
Import React to use in your component.
// Define your Table component
Comment line for organizing code.
const TableComponent = ({ columns, data }) => {
Initialize the TableComponent with columns and data props.
  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({ columns, data }, useGroupBy);
Initialize useTable hook with grouping functionality.
  return (
Start of the return statement for JSX rendering.
    <table {...getTableProps()}>
Create a table and spread table props.
      <thead>
Define the table header group.
        {headerGroups.map(headerGroup => (
Map each header group for rendering.
          <tr {...headerGroup.getHeaderGroupProps()}>
Create a table row for each header group and spread header group props.
            {headerGroup.headers.map(column => (
Map each header in the header group for rendering.
              <th {...column.getHeaderProps()}>{column.render('Header')}</th>
Create a table header for each column and render the Header property.
            ))}
End of mapping headers.
          </tr>
Close the table row tag for the header group.
        ))}
End of mapping header groups.
      </thead>
Close the table header tag.
      <tbody {...getTableBodyProps()}>
Create the table body and spread table body props.
        {rows.map(row => {
Map each row for rendering.
          prepareRow(row);
Call prepareRow method with the current row.
          return (
Return statement for each row render.
            <tr {...row.getRowProps()}>
Create a table row for each row and spread row props.
              {row.cells.map(cell => {
Map each cell in the row for rendering.
                return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>;
Create a table data for each cell and render the Cell property.
              })}
End of mapping cells.
            </tr>
Close the table row tag for the current row.
          );
Close return statement for row render.
        })}
End of mapping rows.
      </tbody>
Close the table body tag.
    </table>
Close the table tag.
  );
Close the return statement for JSX.
};
Close the TableComponent function.
export default TableComponent;
Export the TableComponent for use in other parts of your app.