如何在Reactjs中使用Datatable

npm install react-data-table-component

import React from 'react';
import DataTable from 'react-data-table-component';

const columns = [
  {
    name: 'Name',
    selector: row => row.name,
    sortable: true,
  },
  {
    name: 'Position',
    selector: row => row.position,
    sortable: true,
  },
  {
    name: 'Office',
    selector: row => row.office,
    sortable: true,
  },
  {
    name: 'Age',
    selector: row => row.age,
    sortable: true,
  },
  {
    name: 'Start Date',
    selector: row => row.startDate,
    sortable: true,
  },
  {
    name: 'Salary',
    selector: row => row.salary,
    sortable: true,
  },
];

const data = [
  { name: 'John Doe', position: 'Developer', office: 'New York', age: 30, startDate: '2020-01-01', salary: '$50,000' },
  { name: 'Jane Smith', position: 'Designer', office: 'Los Angeles', age: 28, startDate: '2019-05-15', salary: '$60,000' },
  // 更多数据...
];

const MyDataTable = () => {
  return (
    <DataTable
      title="Employee List"
      columns={columns}
      data={data}
      pagination
      search
      sortable
    />
  );
};

export default MyDataTable;

import React from 'react';
import ReactDOM from 'react-dom';
import MyDataTable from './MyDataTable';

const App = () => {
  return (
    <div>
      <h1>Employee Management System</h1>
      <MyDataTable />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

<DataTable
  title="Employee List"
  columns={columns}
  data={data}
  pagination
  search
  sortable
  paginationServer
  onTableChange={(action, { page }) => {
    // 处理分页逻辑
  }}
/>

.react-data-table-component {
  /* 自定义样式 */
}

<DataTable
  title="Employee List"
  columns={columns}
  data={data}
  pagination
  search
  sortable
>
  <CustomActionColumn />
</DataTable>