要在React中创建可复用且灵活的表格组件,支持自定义列、搜索和分页,可以按照以下步骤进行:
以下是一个简单的示例代码,演示了如何在React中创建一个可复用的表格组件:
import React, { useState } from 'react';
const Table = ({ data, columns }) => {
const [searchTerm, setSearchTerm] = useState('');
const [currentPage, setCurrentPage] = useState(1);
const itemsPerPage = 5;
const filteredData = data.filter((item) =>
Object.values(item).some((value) =>
value.toString().toLowerCase().includes(searchTerm.toLowerCase())
)
);
const paginatedData = filteredData.slice(
(currentPage - 1) * itemsPerPage,
currentPage * itemsPerPage
);
return (
<div>
<input
type="text"
placeholder="Search..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
<table>
<thead>
<tr>
{columns.map((column) => (
<th key={column}>{column}</th>
))}
</tr>
</thead>
<tbody>
{paginatedData.map((item, index) => (
<tr key={index}>
{columns.map((column) => (
<td key={column}>{item[column]}</td>
))}
</tr>
))}
</tbody>
</table>
<div>
<button
onClick={() => setCurrentPage(currentPage - 1)}
disabled={currentPage === 1}
>
Prev
</button>
<span>{currentPage}</span>
<button
onClick={() => setCurrentPage(currentPage + 1)}
disabled={currentPage === Math.ceil(filteredData.length / itemsPerPage)}
>
Next
</button>
</div>
</div>
);
};
export default Table;
在父组件中使用Table组件并传入数据和列定义:
import React from 'react';
import Table from './Table';
const data = [
{ id: 1, name: 'Alice', age: 25 },
{ id: 2, name: 'Bob', age: 30 },
{ id: 3, name: 'Charlie', age: 35 },
{ id: 4, name: 'David', age: 40 },
];
const columns = ['id', 'name', 'age'];
const App = () => {
return <Table data={data} columns={columns} />;
};
export default App;
通过以上步骤,您就可以在React中创建一个可复用且灵活的表格组件,支持自定义列、搜索和分页功能。您可以根据实际需求对表格组件进行定制和扩展,以满足不同场景下的需求。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。