From 93b56a4b0904d1c22501bd68cdc66ff1b431baeb Mon Sep 17 00:00:00 2001
From: Chunxian Zhang <1836891291@qq.com>
Date: Thu, 2 Jun 2022 00:58:54 +0800
Subject: [PATCH] =?UTF-8?q?fe-09=20=E5=AE=8C=E6=88=90=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E9=9B=8F=E5=BD=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lazy-timer-fe/src/pages/Charts/Customers.jsx | 35 ++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 lazy-timer-fe/src/pages/Charts/Customers.jsx

diff --git a/lazy-timer-fe/src/pages/Charts/Customers.jsx b/lazy-timer-fe/src/pages/Charts/Customers.jsx
new file mode 100644
index 0000000..599e895
--- /dev/null
+++ b/lazy-timer-fe/src/pages/Charts/Customers.jsx
@@ -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;