React DataTable component with Material-UI
npm install mosaic-data-tablebash
npm install mosaic-data-table
or
yarn add mosaic-data-table
`
Basic Usage
`
import { MosaicDataTable, useGridPlugins, CustomBodyCellContentRenderPlugin} from 'mosaic-data-table';
function MyTable() {
const headCells = [{
id: 'id',
header: 'ID',
cell: (row: any) => row.id,
},{
id: 'name',
header: 'Name',
cell: (row: any) => row.name,
}];
const items = [{
id: 1,
name: 'John Doe'
},{
id: 2,
name: 'Jane Doe'
}]
const gridPlugins = useGridPlugins(
CustomBodyCellContentRenderPlugin // process the 'render' function
);
return (
headCells={headCells}
items={items}
/>
);
}
`
Built-in Plugins
Plugins can be combined to add specific functionality to your table. The order of plugins matters as they are applied sequentially.
- CustomBodyCellContentRenderPlugin
Enables custom cell content rendering
Note: In future versions, alternative rendering methods will be available, such as automatic value retrieval based on cell ID and smart content type detection. For now, this plugin is required and must be included first in the plugins list.
- FilterRowPlugin
Adds filter row
`
usePluginWithParams(FilterRowPlugin, {
visible?: boolean;
filterChanged: (filter: Filter) => void;
filterColumns: Record;
key: string;
store: FilterRowStore;
})
`
- SummaryRowPlugin
Adds summary row. You can add as many summary rows as you want
`
usePluginWithParams(SummaryRowPlugin, {
visible?: boolean,
summaryColumns: Record string | ReactNode)>,
key: string
})
`
- PaddingPlugin
Handles table cell padding
- ColumnSortPlugin
Enables column sorting functionality
`
usePluginWithParams(ColumnSortPlugin, {
order: 'asc' | 'desc',
orderBy: string,
onSort: (sortBy: string, sortOrder: Order) => void
})
`
- RowSelectionPlugin
Adds row selection capabilities
`
usePluginWithParams(RowSelectionPlugin, {
visible?: boolean,
onGetRowId: (row: any) => any,
onSelectOne: (id: any) => void,
onDeselectOne: (id: any) => void,
rowSelectionStore: RowSelectionStore,
})
`
- RowDetailPlugin
Enables Detail rows
`
usePluginWithParams(RowDetailPlugin, {
showExpanderButton: boolean,
onGetRowId: (row: any) => any,
rowDetailStore: RowDetailStore,
getExpansionNode: (row: any, params: any) => ReactNode
})
`
- ColumnsFillRowSpacePlugin
Handles column spacing and layout
- RowActionsPlugin
Adds action buttons/menu to rows
`
usePluginWithParams(RowActionsPlugin, {
actions: Action[]
})
`
- HighlightColumnPlugin
Enables column highlighting
`
usePluginWithParams(HighlightColumnPlugin, {
isColumnHighlighted: (headCellId: string) => boolean
})
`
- HighlightRowPlugin
Enables row highlighting
`
usePluginWithParams(HighlightRowPlugin, {
isRowHighlighted: (row: any) => boolean
})
`
- PinnedColumnsPlugin
Enables column pinning functionality
- SkeletonLoadingPlugin
Adds loading state visualization
`
usePluginWithParams(SkeletonLoadingPlugin, {
isLoading: boolean,
rowsWhenEmpty?: number,
maxRowsWhenNotEmpty?: number
})
`
- EmptyDataPlugin
Handles empty state display
`
usePluginWithParams(EmptyDataPlugin, {
content?: ReactNode
})
`
- EventsPlugin
Handles data table events (just onClick for now)
`
usePluginWithParams(EventsPlugin, {
tableOnClick?: (event: React.MouseEvent) => void,
bodyOnClick?: (event: React.MouseEvent) => void,
bodyRowOnClick?: (event: React.MouseEvent) => void,
bodyRowCellOnClick?: (event: React.MouseEvent) => void,
headOnClick?: (event: React.MouseEvent) => void,
headRowOnClick?: (event: React.MouseEvent) => void,
headRowCellOnClick?: (event: React.MouseEvent) => void,
})
`
Make your own plugins
- To create a plugin, implement one or more of these interfaces. Each plugin can combine multiple functionalities by implementing multiple interfaces. For example, a plugin can implement both MosaicDataTableBodyRowStylePlugin and MosaicDataTableBodyCellStylePlugin to provide comprehensive row and cell styling.
* You can refer to the built-in plugins in the source code at: https://github.com/GoLabra/MosaicDataTable/tree/main/packages/mosaic-data-table/plugins
`
Example plugin:
export const RedCellPlugin: MosaicDataTableBodyCellStylePlugin = {
scope: 'body-cell-style',
getBodyCellStyle(headCell: ColumnDef, row: any, gridApi: GridApi): SxProps {
return { backgroundColor: '#ff000070 !important' };
}
}
``