Browse Source

fe-09 完成数据表格雏形

master
Chunxian Zhang 2 years ago
parent
commit
93b56a4b09
1 changed files with 35 additions and 0 deletions
  1. +35
    -0
      lazy-timer-fe/src/pages/Charts/Customers.jsx

+ 35
- 0
lazy-timer-fe/src/pages/Charts/Customers.jsx View File

@ -0,0 +1,35 @@
import React from 'react';
import { GridComponent, ColumnsDirective, ColumnDirective, Page, Selection, Inject, Edit, Toolbar, Sort, Filter } from '@syncfusion/ej2-react-grids';
import { customersData, customersGrid } from '../data/dummy';
import { Header } from '../components';
const Customers = () => {
const selectionsettings = { persistSelection: true };
const toolbarOptions = ['Delete'];
const editing = { allowDeleting: true, allowEditing: true };
return (
<div className="m-2 md:m-10 mt-24 p-2 md:p-10 bg-white rounded-3xl">
<Header category="Page" title="Customers" />
<GridComponent
dataSource={customersData}
enableHover={false}
allowPaging
pageSettings={{ pageCount: 5 }}
selectionSettings={selectionsettings}
toolbar={toolbarOptions}
editSettings={editing}
allowSorting
>
<ColumnsDirective>
{/* eslint-disable-next-line react/jsx-props-no-spreading */}
{customersGrid.map((item, index) => <ColumnDirective key={index} {...item} />)}
</ColumnsDirective>
<Inject services={[Page, Selection, Toolbar, Edit, Sort, Filter]} />
</GridComponent>
</div>
);
};
export default Customers;

Loading…
Cancel
Save