react如何引用datatable
安装依赖
在React项目中引入DataTable需要安装react-data-table-component或类似库。通过npm或yarn安装：
npm install react-data-table-component styled-components或
yarn add react-data-table-component styled-components基本使用
导入库并定义表格列和数据：
import DataTable from 'react-data-table-component';
const columns = [
{ name: 'ID', selector: 'id', sortable: true },
{ name: 'Name', selector: 'name', sortable: true },
{ name: 'Email', selector: 'email', sortable: true }
];
const data = [
{ id: 1, name: 'John Doe', email: 'john@example.com' },
{ id: 2, name: 'Jane Smith', email: 'jane@example.com' }
];
function App() {
return (
<DataTable
title="User List"
columns={columns}
data={data}
pagination
highlightOnHover
/>
);
}自定义样式
通过customStyles属性覆盖默认样式：
const customStyles = {
rows: {
style: {
minHeight: '72px',
}
},
headCells: {
style: {
backgroundColor: '#f8f9fa',
fontSize: '16px',
fontWeight: 'bold',
},
},
};
<DataTable
columns={columns}
data={data}
customStyles={customStyles}
/>添加功能
实现排序、分页和搜索等高级功能：
const [filterText, setFilterText] = useState('');
const filteredData = data.filter(item =>
item.name.toLowerCase().includes(filterText.toLowerCase()) ||
item.email.toLowerCase().includes(filterText.toLowerCase())
);
return (
<>
<input
type="text"
placeholder="Search..."
onChange={e => setFilterText(e.target.value)}
/>
<DataTable
columns={columns}
data={filteredData}
pagination
paginationPerPage={5}
paginationRowsPerPageOptions={[5, 10, 15]}
/>
</>
);响应式配置
通过responsive属性启用移动端适配：
<DataTable
columns={columns}
data={data}
responsive
dense
/>注意事项
- 大数据量时建议启用
pagination分页 - 复杂场景可使用
expandableRows实现行展开功能 - 主题定制通过
theme属性实现（'light'|'dark'|自定义对象） - 服务器端数据处理需结合
onChangePage等回调实现
