Row selection is implemented through enableRowSelection and rowSelection states, and setRowSelection is used to manage the selected state, and use getFilteredSelectedRowModel to obtain selected rows for batch operations; 2. The nested subtable uses getSubRows to define subdata, combine row.getCanExpand and getIsExpanded to control the expansion state, and render the subrow content through getExpandedRowModel; 3. The @dnd-kit library is required to introduce the column drag-down order, encapsulate the table header into a drag-down item in the SortableContext, and then update the columnOrder status through onColumnOrderChange after dragging; 4. Virtual scrolling uses @tanstack/react-virtual's useVirtual to virtualize rows, render only the visual area, control position and display through rowVirtualizer.getTotalSize and getVirtualItems, significantly improving the performance under large data volume; 5. Dynamic column configuration controls column display through columnVisibility status and column.toggleVisability, and combines UI check boxes to realize user-defined column display, which can be expanded to local storage; 6. Server-side pagination sorting filtering closes local processing by enabling manualPagination, manualSorting, and manualFiltering. API requests are triggered by pagination, sorting, and globalFilter status, and manages asynchronous data flows in combination with React Query to achieve efficient remote data interaction.

React TanStack Table (formerly known as @tanstack/react-table ) is a powerful, type-safe, headless table library that is ideal for building advanced table patterns. Instead of rendering the UI, it focuses on providing logic and state management, giving you complete control over the UI presentation. Here are several common advanced table patterns and how they are implemented in TanStack Table.

1. Line selection and batch operations

Suitable for scenarios where interactions such as multiple selection, all selection, and anti-select are required, such as data operations in the background management system.

Key points of implementation:

• Use rowSelection status to manage selected rows.
• Provides "Select All", "Anti-Select" and "Clear Select" functions.

 const [rowSelection, setRowSelection] = useState({});

const table = useReactTable({
  data,
  columns,
  state: {
    rowSelection,
  },
  enableRowSelection: true,
  onRowSelectionChange: setRowSelection,
  getCoreRowModel: getCoreRowModel(),
});

Example of batch operation:

 const selectedRows = table.getFilteredSelectedRowModel().rows;

Return (
  <div>
    <button onClick={() => console.log(selectedRows)}>
      Batch deletion ({selectedRows.length})
    </button>
    <table>...</table>
  </div>
);

? Tip: You can get the onChange processing function of select all checkbox through table.getToggleAllRowsSelectedHandler() .

2.Nested subtables (Expandable Rows)

While displaying the main table data, click the row to expand the subtable (such as the order line item).

Implementation method:

• Use row.getCanExpand() and row.getIsExpanded() .
• Add an expand button in the cell.
• Render subrows using getExpandedRowModel() .

 const columns = [
  {
    id: 'expand',
    header: () => null,
    cell: ({ row }) => {
      return row.getCanExpand() ? (
        <button onClick={row.getToggleExpandedHandler()}>
          {row.getIsExpanded() ? &#39;?&#39; : &#39;?&#39;}
        </button>
      ) : null;
    },
  },
  // Other columns...
];

const table = useReactTable({
  data,
  columns,
  getSubRows: (row) => row.subRows, // Assume that each row has a subRows field getCoreRowModel: getCoreRowModel(),
  getExpandedRowModel: getExpandedRowModel(),
});

Render subline:

 {table.getRowModel().rows.map(row => (
  <tr key={row.id}>
    {/* Render main line*/}
  </tr>
  {row.getIsExpanded() && (
    <tr>
      <td colSpan={columns.length}>
        <SubTable data={row.subRows} />
      </td>
    </tr>
  )}
))}

3. Columns can be sorted (Drag & Drop Columns)

Allows the user to rearrange the column order by dragging and dropping.

Need to combine HTML5 Drag/Drop or @dnd-kit .

Use @dnd-kit to recommend and be more flexible:

 npm install @dnd-kit/core @dnd-kit/sortable

Basic ideas:

• Wrap the column header into drag-able items.
• Update the column order after dragging (via setColumnOrder ).

 const [columnOrder, setColumnOrder] = useState(() => 
  columns.map(col => col.id)
);

const table = useReactTable({
  data,
  columns,
  state: { columnOrder },
  onColumnOrderChange: setColumnOrder,
  getCoreRowModel: getCoreRowModel(),
});

Render the header with DndContext and SortableContext:

 <DndContext onDragEnd={handleDragEnd}>
  <SortableContext items={columnOrder} strategy={horizontalListSortingStrategy}>
    <head>
      {table.getHeaderGroups().map(group => (
        <tr key={group.id}>
          {group.headers.map(header => (
            <SortableHeader key={header.id} id={header.id}>
              {header.isPlaceholder? null: flexRender(
                header.column.columnDef.header,
                header.getContext()
              )}
            </SortableHeader>
          ))}
        </tr>
      ))}
    </head>
  </SortableContext>
</DndContext>

?? SortableHeader needs to be encapsulated by yourself and useSortable() to bind drag handle.

4. Virtualized Rows & Columns

When the data volume is large (thousands of rows), avoid rendering all DOM nodes to improve performance.

Use @tanstack/react-virtual

 npm install @tanstack/react-virtual

Implementation steps:

• Create a virtual scroll container.
• Render only rows and columns within the visual area.

 const { rows } = table.getRowModel();
const rowVirtualizer = useVirtual({
  size: rows.length,
  parentRef: containerRef,
  estimateSize: () => 40,
});

const virtualRows = rowVirtualizer.getVirtualItems();

When rendering:

 <div ref={containerRef} style={{ overflow: &#39;auto&#39;, height: &#39;500px&#39; }}>
  <div style={{ height: `${rowVirtualizer.getTotalSize()}px`, position: &#39;relative&#39; }}>
    {virtualRows.map(virtualRow => {
      const row = rows[virtualRow.index];
      Return (
        <div
          key={row.id}
          data-index={virtualRow.index}
          ref={virtualRow.measureRef}
          style={{
            position: &#39;absolute&#39;,
            top: 0,
            left: 0,
            width: &#39;100%&#39;,
            height: `${virtualRow.size}px`,
            transform: `translateY(${virtualRow.start}px)`,
          }}
        >
          {row.getVisibleCells().map(cell => (
            <div key={cell.id}>
              {flexRender(cell.column.columnDef.cell, cell.getContext())}
            </div>
          ))}
        </div>
      );
    })}
  </div>
</div>

? Virtual scrolling can greatly improve long list performance, and it is recommended to consider using it when >100 rows.

5. Dynamic Column and Column Configuration Panel

Allows users to customize which columns to display, adjust column width, etc.

Implementation method:

• Use column.getIsVisible() and column.toggleVisibility() .
• Provide column configuration pop-up windows or drawers.

 const [columnVisability, setColumnVisability] = useState({});

// Control a column to show/hide const toggleColumn = (columnId) => {
  setColumnVisibility(prev => ({
    ...prev,
    [columnId]: !prev[columnId],
  }));
};

// Use const table = useReactTable({
  state: { columnVisibility },
  onColumnVisabilityChange: setColumnVisability,
  // ...
});

Column Configuration UI Example:

 {table.getAllColumns().map(col => {
  Return (
    <label key={col.id}>
      <input
        type="checkbox"
        checked={col.getIsVisible()}
        onChange={col.getToggleVisibilityHandler()}
      />
      {col.id}
    </label>
  );
})}

? Extended to "Save Column Configuration to LocalStorage" or user preferences.

6. Server paging, sorting, and filtering

Suitable for large data sets, the front-end is only responsible for requests, and the back-end returns filtered data.

Key points:

• Disable local pagination/sorting/filtering.
• Manually manage state and trigger API requests.

 const [pagination, setPagination] = useState({
  pageIndex: 0,
  pageSize: 10,
});

const [sorting, setSorting] = useState([]);
const [globalFilter, setGlobalFilter] = useState('');

// Simulate server data acquisition useEffect(() => {
  fetchData({ pagination, sorting, globalFilter });
}, [pagination, sorting, globalFilter]);

Configure table:

 const table = useReactTable({
  data: serverData,
  columns,
  state: {
    pagination,
    sorting,
    globalFilter,
  },
  manualPagination: true,
  manualSorting: true,
  manualFiltering: true,
  pageCount: totalPageCount,
  onPaginationChange: setPagination,
  onSortingChange: setSorting,
  onGlobalFilterChange: setGlobalFilter,
  getCoreRowModel: getCoreRowModel(),
});

? Combined with React Query it can easily achieve caching, retry and loading status.

Summarize

The flexibility of TanStack Table makes it easy to support a variety of complex scenarios:

The above is the detailed content of Advanced Table Patterns with React TanStack Table. For more information, please follow other related articles on the PHP Chinese website!