From 502b25ec8118f46667e1868acaa0e6be05d7df0c Mon Sep 17 00:00:00 2001 From: Elizabeth Mariya Shibu <121534327+elzzbeth04@users.noreply.github.com> Date: Fri, 23 Aug 2024 16:07:35 +0530 Subject: [PATCH] done (#422) --- apps/web-admin/src/components/DataDisplay.jsx | 111 ++++++++++++------ 1 file changed, 77 insertions(+), 34 deletions(-) diff --git a/apps/web-admin/src/components/DataDisplay.jsx b/apps/web-admin/src/components/DataDisplay.jsx index e7433f54..b3e8dcb1 100644 --- a/apps/web-admin/src/components/DataDisplay.jsx +++ b/apps/web-admin/src/components/DataDisplay.jsx @@ -1,42 +1,85 @@ -import { DataGrid, GridToolbar, LinearProgress } from '@mui/x-data-grid'; -import { ThemeProvider, createTheme } from '@mui/material'; - -const MuiTheme = createTheme({ - palette: { +import { + ChakraProvider, + Box, + Spinner, + Table, + Thead, + Tbody, + Tr, + Th, + Td, + TableContainer, + Checkbox, +} from '@chakra-ui/react'; +import { useState } from 'react'; +import { extendTheme } from '@chakra-ui/react'; +const chakraTheme = extendTheme({ + colors: { primary: { - main: '#319795', + 500: '#319795', }, }, }); - export default function DataDisplay({ loading, rows, columns, onRowClick }) { + const [selectedRows, setSelectedRows] = useState([]); + const handleRowClick = (row) => { + onRowClick(row); + }; + + const handleCheckboxChange = (rowId) => { + setSelectedRows((prevSelectedRows) => + prevSelectedRows.includes(rowId) + ? prevSelectedRows.filter((id) => id !== rowId) + : [...prevSelectedRows, rowId], + ); + }; return ( - - row.id} - sx={{ - '& .MuiDataGrid-row:hover': { - cursor: 'pointer', - }, - }} - editMode="row" - checkboxSelection - disableRowSelectionOnClick - onRowClick={onRowClick} - /> - + + + {loading ? ( + + ) : ( + + + + + + 0 && selectedRows.length < rows.length} + onChange={(e) => + setSelectedRows(e.target.checked ? rows.map((row) => row.id) : []) + } + /> + + {columns.map((column) => ( + {column.headerName} + ))} + + + + {rows.map((row) => ( + handleRowClick(row)} + _hover={{ bg: 'gray.100', cursor: 'pointer' }} + > + + handleCheckboxChange(row.id)} + /> + + {columns.map((column) => ( + {row[column.field]} + ))} + + ))} + + + + )} + + ); }