Merge pull request #274 from linea-it/254-simplify-table-preview

linea-it · Jun 4, 2024 · 7a2fa76 · 7a2fa76
2 parents 31594d9 + ee88481
commit 7a2fa76
Showing 1 changed file with 17 additions and 5 deletions.
diff --git a/frontend/components/ProductDataGrid.js b/frontend/components/ProductDataGrid.js
@@ -4,14 +4,15 @@ import uniqueId from 'lodash/uniqueId'
 import PropTypes from 'prop-types'
 import * as React from 'react'
 import { useQuery } from 'react-query'
+import Box from '@mui/material/Box'
 
 import { fetchProductData } from '../services/product'
 
 export default function ProductDataGrid(props) {
   const { productId } = props
   const [rows, setRows] = React.useState([])
   const [columns, setColumns] = React.useState([])
-  const [rowCount, setRowCount] = React.useState(0)
+  const [, setRowCount] = React.useState(0)
   const [page, setPage] = React.useState(0)
   const [pageSize, setPageSize] = React.useState(10)
   const [error, setError] = React.useState(null)
@@ -57,7 +58,7 @@ export default function ProductDataGrid(props) {
     <>
       {status === 'success' && (
         <DataGrid
-          getRowId={row => uniqueId('id_')}
+          getRowId={() => uniqueId('id_')}
           rows={rows}
           columns={columns}
           disableSelectionOnClick
@@ -66,13 +67,14 @@ export default function ProductDataGrid(props) {
           // sortModel={sortModel}
           // onSortModelChange={handleSortModelChange}
           paginationMode="server"
-          rowCount={rowCount}
-          pagination
+          // rowCount={rowCount}
+          // pagination
           page={page}
           onPageChange={page => setPage(page)}
           pageSize={pageSize}
+          hideFooter
           onPageSizeChange={newPageSize => setPageSize(newPageSize)}
-          rowsPerPageOptions={[10, 25, 50, 100]}
+          rowsPerPageOptions={[10]}
           loading={isLoading}
           disableColumnMenu
           disableColumnSelector
@@ -81,6 +83,16 @@ export default function ProductDataGrid(props) {
           }}
         />
       )}
+      <Box
+        sx={{
+          mt: 2,
+          display: 'flex',
+          justifyContent: 'flex-end',
+          fontSize: '14px'
+        }}
+      >
+        10 First Rows
+      </Box>
     </>
   )
 }