@nestbotics/nct_frontend_common_components/dist/components/common/DynamicTable.esm.js

A collection of reusable React components with theme management and styling utilities

import React from 'react';
import { DataGrid, GridColDef, GridFooter, GridFooterContainer } from '@mui/x-data-grid';
import { useTheme } from '@mui/material';
import { tokens } from "../../theme/Theme";
import { jsx as _jsx } from "react/jsx-runtime";
export default function DynamicDataGrid(_ref) {
  var rows = _ref.rows,
    columns = _ref.columns,
    processRowUpdate = _ref.processRowUpdate,
    onProcessRowUpdateError = _ref.onProcessRowUpdateError,
    getRowId = _ref.getRowId;
  var theme = useTheme();
  var colors = tokens(theme.palette.mode);
  return /*#__PURE__*/_jsx(DataGrid, {
    rows: rows,
    columns: columns,
    pageSize: 5,
    processRowUpdate: processRowUpdate,
    onProcessRowUpdateError: onProcessRowUpdateError,
    disableSelectionOnClick: true,
    getRowId: getRowId,
    experimentalFeatures: {
      newEditingApi: true
    },
    sx: {
      '& .MuiDataGrid-root': {
        border: 'none'
      },
      '& .MuiDataGrid-cell': {
        borderBottom: "1px solid ".concat(theme.palette.mode === 'dark' ? colors.primary[600] : colors.grey[200]),
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        fontSize: '1.02rem'
      },
      '& .MuiDataGrid-columnHeaders': {
        backgroundColor: theme.palette.mode === 'dark' ? colors.primary[600] : colors.primary[900],
        color: theme.palette.mode === 'dark' ? colors.grey[100] : colors.primary[100],
        borderBottom: 'none',
        '& .MuiDataGrid-columnHeaderTitle': {
          fontWeight: 'bold',
          fontSize: '1.04rem'
        }
      },
      '& .MuiDataGrid-columnHeader': {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center'
      },
      '& .MuiDataGrid-columnHeaderTitleContainer': {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center'
      },
      '& .MuiDataGrid-virtualScroller': {
        backgroundColor: theme.palette.mode === 'dark' ? colors.primary[500] : colors.grey[50]
      },
      '& .MuiDataGrid-footerContainer': {
        borderTop: 'none',
        backgroundColor: theme.palette.mode === 'dark' ? colors.primary[600] : colors.primary[900]
      },
      '& .MuiDataGrid-toolbarContainer .MuiButton-text': {
        color: "".concat(theme.palette.mode === 'dark' ? colors.grey[100] : colors.grey[900], " !important")
      },
      '& .MuiDataGrid-row:hover': {
        backgroundColor: theme.palette.mode === 'dark' ? colors.primary[400] : colors.primary[900]
      },
      '& .MuiDataGrid-columnSeparator--resizable:hover': {
        color: colors.primary[200]
      }
    },
    components: {
      Footer: function Footer() {
        return /*#__PURE__*/_jsx(GridFooterContainer, {
          children: /*#__PURE__*/_jsx(GridFooter, {
            sx: {
              border: 'none',
              '& .MuiTablePagination-displayedRows': {
                display: 'none'
              },
              '& .MuiTablePagination-selectLabel': {
                display: 'none'
              },
              '& .MuiTablePagination-select': {
                display: 'none'
              },
              '& .MuiTablePagination-actions': {
                display: 'none'
              }
            }
          })
        });
      }
    }
  });
}