Installation

npm

npm i material-ui-grouped-table --save

yarn

yarn add material-ui-grouped-table

Usage

import React from 'react';
import GroupedColumnTableComponent from "material-ui-grouped-table";

export default function App() {
  return (
    <div className="App">
      <GroupedColumnTableComponent rows={[]} columns={[]} />
    </div>
  );
}

Example Component

Data

The Data interface represents an object with dynamic keys and values, with the values being of any type. It has the following structure:

| Name | Type | Description | | --- | --- | --- | | key | string | An object with dynamic keys and values. |

Note that the key in the interface definition represents any string key name that you might use to define properties in the object.

GroupedColumn

The following properties can be passed to the GroupedColumn object:

| Name | Type | Default | Description | | --- | --- | --- | --- | | label | string | | The display name for the column. | | id | string | undefined | A unique identifier for the column. | | minWidth | number | undefined | The minimum width for the column. | | align | 'right' | 'left' | 'center' | 'left' | The alignment of the column content. | | format | (value: any) => React.ReactNode | undefined | A function that formats the content of the column. | | color | (value: any) => string | undefined | A function that returns the color of the column content. | | onClick | (value: any) => void | undefined | A callback function triggered when a column is clicked. It passes the value of the clicked column as an argument. | | navigateTo | (value: any) => string | undefined | A function that returns the URL to navigate to when a column is clicked. | | width | string | number | undefined | The width of the column. | | children | GroupedColumn[] | undefined | An array of GroupedColumn objects representing child columns. | | columnSxProps | SxProps | undefined | Sx Props for customizing the column. |

GroupedTableProps

The following props can be passed to the GroupedTable component:

| Name | Type | Default | Description | | --- | --- | --- | --- | | rows | Data[] | null | Data for Table | | columns | GroupedColumn[] | null | The Columns for the Table | | onClick | (value: Data) => void | undefined | Callback function triggered when a row is clicked. It passes the value of the clicked row as an argument. | | enableSort | boolean | undefined | Boolean indicating whether the table should be sortable. | | enableBorders | boolean | undefined | Boolean indicating whether the table should have borders. | | ellipsis | boolean | undefined | Boolean indicating whether text in the table should be truncated with an ellipsis. | | fixedHeight | number | undefined | Number representing the height of the table. | | enableFilters | boolean | undefined | Boolean indicating whether the table should display filtering options. | | filterChanges | (value: IGenericObject) => void | undefined | Callback function triggered when a filter is changed. It passes an object containing the current filter values as an argument. | | enableCheckBox | boolean | undefined | Boolean indicating whether the table should display checkboxes. | | checkBoxChange | (data: readonly string[]) => void | undefined | Callback function triggered when a checkbox is changed. It passes an array of the checked rows as an argument. | | checkboxSelector | string | undefined | String representing the column to display checkboxes in. |

Built With

• React - A JavaScript library for building user interfaces

• Material UI - Component Library for Material UI

License

MIT Licensed. Copyright (c) Vishal Ramanand Sharma 2023.