react如何封装usetable

封装 useTable Hook 的方法

在 React 中封装 useTable Hook 可以帮助简化表格组件的逻辑，使其更易于复用和维护。以下是几种常见的封装方法：

基础封装

创建一个自定义 Hook，接收表格数据和配置参数，返回表格渲染所需的属性和方法。

import { useState, useMemo } from 'react';

function useTable(data, columns, options = {}) {
  const [sortConfig, setSortConfig] = useState(null);
  const [pagination, setPagination] = useState({
    pageSize: options.pageSize || 10,
    currentPage: 1,
  });

  const sortedData = useMemo(() => {
    if (!sortConfig) return data;
    return [...data].sort((a, b) => {
      if (a[sortConfig.key] < b[sortConfig.key]) {
        return sortConfig.direction === 'ascending' ? -1 : 1;
      }
      if (a[sortConfig.key] > b[sortConfig.key]) {
        return sortConfig.direction === 'ascending' ? 1 : -1;
      }
      return 0;
    });
  }, [data, sortConfig]);

  const paginatedData = useMemo(() => {
    const start = (pagination.currentPage - 1) * pagination.pageSize;
    const end = start + pagination.pageSize;
    return sortedData.slice(start, end);
  }, [sortedData, pagination]);

  const requestSort = (key) => {
    let direction = 'ascending';
    if (sortConfig && sortConfig.key === key && sortConfig.direction === 'ascending') {
      direction = 'descending';
    }
    setSortConfig({ key, direction });
  };

  return {
    data: paginatedData,
    columns,
    sortConfig,
    requestSort,
    pagination,
    setPagination,
    totalItems: data.length,
  };
}

集成第三方库

对于更复杂的需求，可以基于现有表格库（如 react-table）进行二次封装。

import { useTable as useReactTable } from 'react-table';

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

  return {
    ...tableInstance,
    // 添加自定义方法或状态
  };
}

功能扩展

为表格添加常见功能如筛选、分页、排序等。

function useAdvancedTable(data, columns) {
  const [filters, setFilters] = useState({});
  const table = useTable(data, columns);

  const filteredData = useMemo(() => {
    return table.data.filter(item => {
      return Object.entries(filters).every(([key, value]) => {
        return item[key].includes(value);
      });
    });
  }, [table.data, filters]);

  return {
    ...table,
    filteredData,
    filters,
    setFilters,
  };
}

性能优化

对于大型数据集，考虑使用虚拟滚动或分页加载。

function useVirtualTable(data, columns, { rowHeight, visibleRows }) {
  const [scrollTop, setScrollTop] = useState(0);
  const startIndex = Math.floor(scrollTop / rowHeight);
  const visibleData = data.slice(startIndex, startIndex + visibleRows);

  return {
    data: visibleData,
    columns,
    totalHeight: data.length * rowHeight,
    setScrollTop,
    startIndex,
  };
}

使用示例

封装后的 Hook 可以在组件中直接使用：

function MyTableComponent() {
  const { data, columns, requestSort, sortConfig } = useTable(myData, myColumns);

  return (
    <table>
      <thead>
        <tr>
          {columns.map(column => (
            <th key={column.key} onClick={() => requestSort(column.key)}>
              {column.header}
              {sortConfig?.key === column.key && (
                <span>{sortConfig.direction === 'ascending' ? '↑' : '↓'}</span>
              )}
            </th>
          ))}
        </tr>
      </thead>
      <tbody>
        {data.map(row => (
          <tr key={row.id}>
            {columns.map(column => (
              <td key={column.key}>{row[column.key]}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

这些方法可以根据实际需求进行调整和组合，创建适合特定场景的表格 Hook。