data-grid-ultra v4.1.1

data-grid-ultra

This package is a full customized data grid component base on mui data grid library.

Installation

Install the package in your project directory with:

npm install data-grid-ultra

Usage

import * as React from 'react';
import Box from '@mui/material/Box';
import {
  DataGridUltra,
  GridToolbar,
  useGridApiRef,
  useKeepGroupedColumnsHidden,
} from 'data-grid-ultra';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function DataGridUltraDemo() {
  const { data, loading } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 100,
    editable: true,
    visibleFields: [
      'commodity',
      'quantity',
      'filledQuantity',
      'status',
      'isFilled',
      'unitPrice',
      'unitPriceCurrency',
      'subTotal',
      'feeRate',
      'feeAmount',
      'incoTerm',
    ],
  });
  const apiRef = useGridApiRef();

  const initialState = useKeepGroupedColumnsHidden({
    apiRef,
    initialState: {
      ...data.initialState,
      rowGrouping: {
        ...data.initialState?.rowGrouping,
        model: ['commodity'],
      },
      sorting: {
        sortModel: [{ field: '__row_group_by_columns_group__', sort: 'asc' }],
      },
    },
  });

  return (
    <Box sx={{ height: 520, width: '100%' }}>
      <DataGridUltra
        {...data}
        apiRef={apiRef}
        loading={loading}
        disableRowSelectionOnClick
        initialState={initialState}
        slots={{ toolbar: GridToolbar }}
      />
    </Box>
  );
}

Props