react 自定义表格

### 如何在 React 中实现自定义表格组件 #### 自定义表格组件的核心概念 构建一个自定义的 React 表格组件通常涉及以下几个核心部分：数据渲染、列配置、样式控制以及交互逻辑（如排序、分页、过滤等功能）。通过合理的设计，可以创建一个灵活且易于扩展的表格组件。 --- #### 示例代码：基础版自定义表格组件 以下是一个简单的自定义表格组件示例，支持基本的数据展示功能： ```javascript import React, { useState } from 'react'; import PropTypes from 'prop-types'; const CustomTable = ({ columns, data }) => { const [sortConfig, setSortConfig] = useState({ key: '', direction: '' }); // 排序函数 const handleSort = (key) => { let direction = 'asc'; if (sortConfig.key === key && sortConfig.direction === 'asc') { direction = 'desc'; } setSortConfig({ key, direction }); }; // 数据排序 const sortedData = [...data].sort((a, b) => { if (!sortConfig.key || !sortConfig.direction) return 0; const valueA = a[sortConfig.key]; const valueB = b[sortConfig.key]; let comparison = 0; if (valueA > valueB) comparison = 1; else if (valueA < valueB) comparison = -1; return ( sortConfig.direction === 'asc' ? comparison : -comparison ); }); return ( <table> <thead> <tr> {columns.map(({ name, key }, index) => ( <th key={index} onClick={() => handleSort(key)} style={{ cursor: 'pointer', textAlign: 'left' }} > {name}{' '} {sortConfig.key === key && (sortConfig.direction === 'asc' ? '↑' : '↓')} </th> ))} </tr> </thead> <tbody> {sortedData.map((row, rowIndex) => ( <tr key={rowIndex}> {columns.map(({ key }, colIndex) => ( <td key={colIndex}>{row[key]}</td> ))} </tr> ))} </tbody> </table> ); }; CustomTable.propTypes = { columns: PropTypes.arrayOf( PropTypes.shape({ name: PropTypes.string.isRequired, key: PropTypes.string.isRequired, }) ).isRequired, data: PropTypes.arrayOf(PropTypes.object).isRequired, }; ``` --- #### 高级特性集成 为了进一步增强表格的功能，可以根据需求加入更多高级特性，例如分页和过滤。以下是基于上述基础版本的一个改进方案，集成了分页功能： ```javascript // 添加分页逻辑 const PaginatedTable = ({ columns, data, pageSize = 10 }) => { const [currentPage, setCurrentPage] = useState(1); const indexOfLastRow = currentPage * pageSize; const indexOfFirstRow = indexOfLastRow - pageSize; const currentRows = data.slice(indexOfFirstRow, indexOfLastRow); const paginate = (pageNumber) => setCurrentPage(pageNumber); return ( <> <CustomTable columns={columns} data={currentRows} /> <div className="pagination"> {[...Array(Math.ceil(data.length / pageSize))].map((_, i) => ( <button key={i + 1} onClick={() => paginate(i + 1)}> {i + 1} </button> ))} </div> </> ); }; ``` --- #### 使用第三方库 `ali-react-table` 创建高性能表格 如果需要更复杂的表格功能，可以选择使用成熟的第三方库，例如 `ali-react-table`[^1]。它提供了高度可定制化的 API 和优秀的性能优化能力。下面是如何快速集成它的简单例子： ```javascript import React from 'react'; import Table from 'ali-react-table'; // 假设已安装 ali-react-table const App = () => { const columns = [ { title: 'Name', dataIndex: 'name', key: 'name' }, { title: 'Age', dataIndex: 'age', key: 'age' }, { title: 'Address', dataIndex: 'address', key: 'address' }, ]; const dataSource = [ { key: '1', name: 'John Doe', age: 32, address: 'New York No. 1 Lake Park' }, { key: '2', name: 'Jane Smith', age: 28, address: 'London No. 2 Lake Park' }, ]; return <Table columns={columns} dataSource={dataSource} />; }; export default App; ``` --- #### 总结 无论是手动开发还是借助第三方库，React 表格组件都可以满足各种复杂场景下的需求。对于初学者来说，建议先掌握基础的表格结构和交互逻辑；而对于更高阶的应用，则可以通过引入像 `ali-react-table` 这样的工具来提升效率和性能[^1]^。 ---