mui-advance-data-grid v1.0.7

mui-advance-data-grid

The MuiAdvancedDataGrid component is a feature-rich and customizable data grid designed for React applications, providing developers with powerful tools to manage and display tabular data efficiently. It supports advanced functionalities like cell click events, sticky headers, serial number columns, and pagination.

With its highly configurable options object, developers can customize the grid's appearance and behavior. Features include column filtering, sorting, and flexible toolbar options for column arrangement, bulk Freeze/delete, and data upload/download. The grid also supports currency formatting, text ellipsis, and responsive row actions like edit, delete, or view details, complete with tooltips and icons.

Additional highlights include dynamic row heights, date formatting, and customizable header/footer colors to match your application's theme. Install and use MuiAdvancedDataGrid to simplify data handling and visualization in your React projects.

Installation

Install the package with npm:

  npm i mui-advance-data-grid

Example

<MuiAdvancedDataGrid
  data={[]}
  isLoading={isLoading}
  columns={columns}
  childrens={children}
  options={{
    enableCellClick: true,
    height: 600,
    enableStrikyHeader: true,
    headerBackgroundColor: '#eef6ff',
    footerBackgroundColor: '#eef6ff',
    dateFormat: 'DD/MM/YYYY HH:mm:ss',
    textEllipsis: 10,
    enableSerialNumber: true,
    color: 'success',
    currencyOptions: {
      currencyCode: 'USD',
      locale: 'en-US',
      decimal: 2,
    },
    filterOptions: {
      variant: 'standard',
      enableMultipleColumnSelection: true,
      onQuerySearch,
    },
    paginationOptions: {
      pageSize: 0,
      rowPerPage: [50, 100, 150],
      isFirstLastPageButton: false,
    },
    toolbarOptions: {
      enableColumnArrangement: true,
      enableDeleteAll: true,
      ToolbarComponent: <Button>Test<Button>,
      onUpload,
      onDownload,
    },
    rowActions: [
      {
        label: 'Edit',
        icon: <EditIcon />,
        tooltip: 'Edit',
        onClick: (row) => {
          console.log('Edit action clicked for row:', row);
        },
      },
    ],
  }}
/>

Documentation

1. data:

   • Purpose: Provides the data to be displayed in the grid.
   • Type: Array of objects.
   • Example:

     const listArray = [
       { id: 1, name: 'John Doe', age: 30 },
       { id: 2, name: 'Jane Smith', age: 25 },
     ];

2. isLoading:

   • Purpose: Indicates whether the grid is in a loading state.
   • Type: Boolean.
   • Example: Set isLoading={true} to show a loading skeleton while data is being fetched.

3. columns:

   • Purpose: Defines the structure and headers of the grid.
   • Type: Array of objects.
   • Example:

     const columns = [
       { field: 'id', headerName: 'ID', width: 70 },
       { field: 'name', headerName: 'Name', width: 150 },
       { field: 'age', headerName: 'Age', width: 100 },
     ];

4. childrens:

   • Purpose: Defines the structure and headers of the grid.
   • Type: Array of objects.
   • Example:

     const columns = [
       { field: 'address', headerName: 'Address', width: 70 },
     ];

options Property

The options object is used to configure various settings and behaviors for the grid.

1. enableCellClick:

   • Purpose: Enables clicking on cells to trigger events.
   • Type: Boolean.
   • Example: Set enableCellClick={true} to allow cell click handling.

2. height:

   • Purpose: Sets the height of the grid.
   • Type: Number (pixels).
   • Example: height: 600 sets the grid height to 600 pixels.

3. enableStrikyHeader:

   • Purpose: Enables a sticky header that stays visible while scrolling.
   • Type: Boolean.
   • Example: Set enableStrikyHeader={true} to keep the header fixed.

4. headerBackgroundColor and footerBackgroundColor:

   • Purpose: Sets custom colors for the header and footer.
   • Type: String (CSS color values).
   • Example: headerBackgroundColor: '#eef6ff'.

5. dateFormat:

   • Purpose: Specifies the date format for date fields in the grid.
   • Type: String.
   • Example: dateFormat: 'DD/MM/YYYY HH:mm:ss'.

6. textEllipsis:

   • Purpose: Limits the number of characters shown in a cell, with ellipsis for overflow.
   • Type: Number.
   • Example: textEllipsis: 10 truncates text longer than 10 characters.

7. enableSerialNumber:

   • Purpose: Adds a serial number column to the grid.
   • Type: Boolean.
   • Example: Set enableSerialNumber={true} to show row numbers.

8. color:

   • Purpose: Sets a theme color for the grid.
   • Type: String.
   • Example: color: 'success'.

currencyOptions

1. currencyCode:

   • Purpose: Defines the currency type for formatting monetary values.
   • Type: String.
   • Example: currencyCode: 'USD'.

2. locale:

   • Purpose: Sets the locale for currency formatting.
   • Type: String.
   • Example: locale: 'en-US'.

3. decimal:

   • Purpose: Specifies the number of decimal places.
   • Type: Number.
   • Example: decimal: 2.

filterOptions

1. variant:

   • Purpose: Specifies the filter style.
   • Type: String ('standard', 'outlined', 'filled').
   • Example: variant: 'standard'.

2. enableMultipleColumnSelection:

   • Purpose: Allows filtering on multiple columns.
   • Type: Boolean.
   • Example: enableMultipleColumnSelection: true.

3. onQuerySearch:

   • Purpose: Callback function triggered when a filter is applied.
   • Type: Function.

paginationOptions

1. pageSize:

   • Purpose: Specifies the default number of rows per page.
   • Type: Number.
   • Example: pageSize: 0 (default shows all rows).

2. rowPerPage:

   • Purpose: Array of available options for rows per page.
   • Type: Array of Numbers.
   • Example: [50, 100, 150].

3. isFirstLastPageButton:

   • Purpose: Enables or disables buttons to jump to the first and last pages.
   • Type: Boolean.
   • Example: isFirstLastPageButton: false.

toolbarOptions

1. enableColumnArrangement:

   • Purpose: Allows reordering or hiding columns.
   • Type: Boolean.
   • Example: enableColumnArrangement: true.

2. enableDeleteAll:

   • Purpose: Adds a button to delete all rows.
   • Type: Boolean.
   • Example: enableDeleteAll: true.

3. ToolbarComponent:

   • Purpose: Custom toolbar component.
   • Type: React Component or undefined.

4. onUpload and onDownload:

   • Purpose: Callbacks for uploading or downloading data.
   • Type: Functions.

rowActions

1. Purpose: Adds action buttons for each row.
2. Type: Array of objects.
3. Example:

   rowActions: [
     {
       label: 'Edit',
       icon: <EditIcon />,
       onClick: (row) => {
         console.log('Edit clicked for row:', row);
       },
       tooltip: 'Edit',
     },
   ];

Authors

• Shivaji : (Sr. React Developer)
• Shyamal : (Sr. React Developer)

License

MIT