行選擇通過(guò)enableRowSelection和rowSelection狀態(tài)實(shí)現(xiàn)，配合setRowSelection管理選中狀態(tài)，并利用getFilteredSelectedRowModel獲取選中行進(jìn)行批量操作；2. 嵌套子表格使用getSubRows定義子數(shù)據(jù)，結(jié)合row.getCanExpand和getIsExpanded控制展開狀態(tài)，通過(guò)getExpandedRowModel渲染子行內(nèi)容；3. 列拖拽排序需引入@dnd-kit庫(kù)，將表頭封裝為SortableContext中的可拖拽項(xiàng)，拖拽后通過(guò)onColumnOrderChange更新columnOrder狀態(tài)；4. 虛擬滾動(dòng)使用@tanstack/react-virtual的useVirtual對(duì)行進(jìn)行虛擬化，僅渲染可視區(qū)域，通過(guò)rowVirtualizer.getTotalSize和getVirtualItems控制位置與顯示，顯著提升大數(shù)據(jù)量下的性能；5. 動(dòng)態(tài)列配置通過(guò)columnVisibility狀態(tài)和column.toggleVisibility控制列的顯隱，結(jié)合UI復(fù)選框?qū)崿F(xiàn)用戶自定義列展示，可擴(kuò)展至本地存儲(chǔ)；6. 服務(wù)端分頁(yè)排序過(guò)濾通過(guò)啟用manualPagination、manualSorting、manualFiltering關(guān)閉本地處理，由pagination、sorting、globalFilter狀態(tài)觸發(fā)API請(qǐng)求，結(jié)合React Query管理異步數(shù)據(jù)流，實(shí)現(xiàn)高效遠(yuǎn)程數(shù)據(jù)交互。

React TanStack Table（以前稱為 @tanstack/react-table）是一個(gè)功能強(qiáng)大、類型安全、無(wú)頭的表格庫(kù)，非常適合構(gòu)建高級(jí)表格模式。它不渲染 UI，而是專注于提供邏輯和狀態(tài)管理，讓你完全控制 UI 展現(xiàn)。以下是幾個(gè)常見的 高級(jí)表格模式 及其在 TanStack Table 中的實(shí)現(xiàn)方式。

1. 行選擇與批量操作

適用于需要支持多選、全選、反選等交互的場(chǎng)景，比如后臺(tái)管理系統(tǒng)中的數(shù)據(jù)操作。

實(shí)現(xiàn)要點(diǎn)：

• 使用 rowSelection 狀態(tài)管理選中行。
• 提供“全選”、“反選”、“清空選擇”功能。

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

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

批量操作示例：

const selectedRows = table.getFilteredSelectedRowModel().rows;

return (
  <div>
    <button onClick={() => console.log(selectedRows)}>
      批量刪除 ({selectedRows.length})
    </button>
    <table>...</table>
  </div>
);

? 提示：可通過(guò) table.getToggleAllRowsSelectedHandler() 獲取全選 checkbox 的 onChange 處理函數(shù)。

2. 嵌套子表格（Expandable Rows）

展示主表數(shù)據(jù)的同時(shí)，點(diǎn)擊行展開子表格（如訂單 訂單項(xiàng)）。

實(shí)現(xiàn)方式：

• 使用 row.getCanExpand() 和 row.getIsExpanded()。
• 在單元格中添加展開按鈕。
• 使用 getExpandedRowModel() 渲染子行。

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

const table = useReactTable({
  data,
  columns,
  getSubRows: (row) => row.subRows, // 假設(shè)每行有 subRows 字段
  getCoreRowModel: getCoreRowModel(),
  getExpandedRowModel: getExpandedRowModel(),
});

渲染子行：

{table.getRowModel().rows.map(row => (
  <tr key={row.id}>
    {/* 渲染主行 */}
  </tr>
  {row.getIsExpanded() && (
    <tr>
      <td colSpan={columns.length}>
        <SubTable data={row.subRows} />
      </td>
    </tr>
  )}
))}

3. 列可拖拽排序（Drag & Drop Columns）

允許用戶通過(guò)拖拽重新排列列順序。

需要結(jié)合 HTML5 Drag/Drop 或 @dnd-kit。

使用 @dnd-kit 更推薦，更靈活：

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

基本思路：

• 將列頭包裝成可拖拽項(xiàng)。
• 拖拽結(jié)束后更新列順序（通過(guò) setColumnOrder）。

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

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

配合 DndContext 和 SortableContext 渲染表頭：

<DndContext onDragEnd={handleDragEnd}>
  <SortableContext items={columnOrder} strategy={horizontalListSortingStrategy}>
    <thead>
      {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>
      ))}
    </thead>
  </SortableContext>
</DndContext>

?? SortableHeader 需要你自己封裝，使用 useSortable() 綁定 drag handle。

4. 虛擬滾動(dòng)（Virtualized Rows & Columns）

當(dāng)數(shù)據(jù)量大（上千行）時(shí)，避免渲染全部 DOM 節(jié)點(diǎn)，提升性能。

使用 @tanstack/react-virtual

npm install @tanstack/react-virtual

實(shí)現(xiàn)步驟：

• 創(chuàng)建虛擬滾動(dòng)容器。
• 只渲染可視區(qū)域內(nèi)的行和列。

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

const virtualRows = rowVirtualizer.getVirtualItems();

渲染時(shí)：

<div ref={containerRef} style={{ overflow: 'auto', height: '500px' }}>
  <div style={{ height: `${rowVirtualizer.getTotalSize()}px`, position: 'relative' }}>
    {virtualRows.map(virtualRow => {
      const row = rows[virtualRow.index];
      return (
        <div
          key={row.id}
          data-index={virtualRow.index}
          ref={virtualRow.measureRef}
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            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>

? 虛擬滾動(dòng)可大幅提升長(zhǎng)列表性能，建議在 > 100 行時(shí)考慮使用。

5. 動(dòng)態(tài)列與列配置面板

允許用戶自定義顯示哪些列，調(diào)整列寬等。

實(shí)現(xiàn)方式：

• 使用 column.getIsVisible() 和 column.toggleVisibility()。
• 提供列配置彈窗或抽屜。

const [columnVisibility, setColumnVisibility] = useState({});

// 控制某列顯示/隱藏
const toggleColumn = (columnId) => {
  setColumnVisibility(prev => ({
    ...prev,
    [columnId]: !prev[columnId],
  }));
};

// 在 table 配置中使用
const table = useReactTable({
  state: { columnVisibility },
  onColumnVisibilityChange: setColumnVisibility,
  // ...
});

列配置 UI 示例：

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

? 可擴(kuò)展為“保存列配置到 localStorage”或用戶偏好。

6. 服務(wù)端分頁(yè)、排序、過(guò)濾

適用于大數(shù)據(jù)集，前端只負(fù)責(zé)請(qǐng)求，后端返回過(guò)濾后數(shù)據(jù)。

關(guān)鍵點(diǎn)：

• 禁用本地分頁(yè)/排序/過(guò)濾。
• 手動(dòng)管理狀態(tài)并觸發(fā) API 請(qǐng)求。

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

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

// 模擬服務(wù)端數(shù)據(jù)獲取
useEffect(() => {
  fetchData({ pagination, sorting, globalFilter });
}, [pagination, sorting, globalFilter]);

配置 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(),
});

? 結(jié)合 React Query 可輕松實(shí)現(xiàn)緩存、重試、loading 狀態(tài)。

總結(jié)

TanStack Table 的靈活性讓它能輕松支持各種復(fù)雜場(chǎng)景：

以上是帶有React Tanstack表的高級(jí)表格圖案的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！