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

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

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = DynamicDataGrid;
var _react = _interopRequireDefault(require("react"));
var _xDataGrid = require("@mui/x-data-grid");
var _material = require("@mui/material");
var _Theme = require("../../theme/Theme");
var _jsxRuntime = require("react/jsx-runtime");
function DynamicDataGrid(_ref) {
  var rows = _ref.rows,
    columns = _ref.columns,
    processRowUpdate = _ref.processRowUpdate,
    onProcessRowUpdateError = _ref.onProcessRowUpdateError,
    getRowId = _ref.getRowId;
  var theme = (0, _material.useTheme)();
  var colors = (0, _Theme.tokens)(theme.palette.mode);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGrid.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__*/(0, _jsxRuntime.jsx)(_xDataGrid.GridFooterContainer, {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGrid.GridFooter, {
            sx: {
              border: 'none',
              '& .MuiTablePagination-displayedRows': {
                display: 'none'
              },
              '& .MuiTablePagination-selectLabel': {
                display: 'none'
              },
              '& .MuiTablePagination-select': {
                display: 'none'
              },
              '& .MuiTablePagination-actions': {
                display: 'none'
              }
            }
          })
        });
      }
    }
  });
}