# @jazasoft/mui-table > Advanced React Data Table using Material UI Latest version **1.0.33** (published 2024-12-21) · MIT license · 0 weekly downloads ## Install ```sh npm install @jazasoft/mui-table pnpm add @jazasoft/mui-table yarn add @jazasoft/mui-table bun add @jazasoft/mui-table ``` ## Health **Score 30/100 (F)** — status: maintenance-mode. Positive: esm support; no vulnerabilities. Warnings: low downloads; no types. Negative: stale; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.33 | | Published | 2024-12-21 | | First published | 2020-07-11 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | ESM + CommonJS | | Node | >=10 | | Dependencies | 11 | | Unpacked size | 1.1 MB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 8 | | Author | Md Zahid Raza | | Maintainers | md-zahid.raza | ## Links - npm: https://www.npmjs.com/package/@jazasoft/mui-table - Repository: https://github.com/jaza-soft/mui-table - Homepage: https://github.com/jaza-soft/mui-table#readme - Issues: https://github.com/jaza-soft/mui-table/issues - npm.io page: https://npm.io/package/@jazasoft/mui-table ## Dependencies (11) - [clsx](https://npm.io/package/clsx.md) 1.1.1 - [final-form](https://npm.io/package/final-form.md) 4.20.4 - [lodash.get](https://npm.io/package/lodash.get.md) 4.4.2 - [lodash.merge](https://npm.io/package/lodash.merge.md) 4.6.2 - [lodash.memoize](https://npm.io/package/lodash.memoize.md) 4.1.2 - [react-dropzone](https://npm.io/package/react-dropzone.md) ^14.2.3 - [lodash.debounce](https://npm.io/package/lodash.debounce.md) 4.0.8 - [react-final-form](https://npm.io/package/react-final-form.md) 6.5.7 - [final-form-arrays](https://npm.io/package/final-form-arrays.md) 3.0.2 - [react-final-form-arrays](https://npm.io/package/react-final-form-arrays.md) 3.1.1 - [react-perfect-scrollbar](https://npm.io/package/react-perfect-scrollbar.md) 1.5.8 ## Recent versions - 1.0.33 (latest) — 2024-12-21 - 1.0.32 — 2024-08-15 - 1.0.31 — 2024-08-15 - 1.0.30 — 2024-08-14 - 1.0.29 — 2024-01-13 - 1.0.28 — 2023-09-27 - 1.0.27 — 2023-08-23 - 1.0.26 — 2023-06-26 - 1.0.25 — 2023-06-11 - 1.0.24 — 2023-06-11 - 1.0.23 — 2023-05-29 - 1.0.22 — 2023-05-29 - 1.0.21 — 2023-05-29 - 1.0.20 — 2023-05-28 - 1.0.19 — 2023-05-28 - … 72 more at https://npm.io/package/@jazasoft/mui-table/versions ## README # @jazasoft/mui-table > Advanced React Data Table using Material UI [![NPM](https://img.shields.io/npm/v/@jazasoft/mui-table.svg)](https://www.npmjs.com/package/@jazasoft/mui-table) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) ## Features - [x] Simple Table - [x] Collective Editing - Edit entire table at once - [x] Sorting - [x] Selection - [x] Pagination - [x] Filter & Search - [x] Inline Editing - Edit one row at once - [x] Add/Remove Row - [x] Horizontal Scroll/ Force Line Wrap on Specified characters - [x] Variant - default, excel - [x] Tree Table - [x] Custom Footer Actions - [ ] Column selection - [ ] Spanning - Row Span & Col Span - [ ] Expandable View/ Modal View/ Sidebar View - [ ] Fully Customizable - [ ] Fixed Header - [ ] Drag & Drop for Editable Tree Data - [ ] Change Sequence using Drag & Drop - [ ] Elements - [x] TextField - [x] TextInput - [x] SelectInput - [x] BooleanInput - [x] AutoCompleteInput - [x] On Demand loading from remote for AutoCompleteInput - [ ] DateInput [Examples](https://codesandbox.io/s/optimistic-shamir-u78kl) ## Install ```bash npm install --save @jazasoft/mui-table ``` ## Usage ```jsx import React, { Component } from 'react' import { MuiTable } from '@jazasoft/mui-table' const columns = [ { dataKey: 'dessert', title: 'Dessert' }, { dataKey: 'calories', title: 'Calories', align: 'right' }, { dataKey: 'fat', title: 'Fat (g)', align: 'right' }, { dataKey: 'carbs', title: 'Carbohydrate (g)', align: 'right' }, { dataKey: 'protein', title: 'Protein', align: 'right' } ] const rows = Array(10) .fill('') .map((_, idx) => ({ dessert: `Dessert ${idx + 1}`, calories: Math.round(Math.random() * 500), fat: Math.round(Math.random() * 10), carbs: Math.round(Math.random() * 100), protein: (Math.random() * 10).toFixed(1) })) class App extends Component { render() { return } } ``` ## Types **Action** | Name | Type | Default Value | Description | | ------- | -------------- | ------------- | ----------------------------------------------------------- | | name | `string` | | `Required`. Name of action | | tooltip | `string` | | `Optional`. Tooltip for the action | | icon | `ReactElement` | | Icon for this action. Required for custom actions. | | options | `object` | | options will be passed down to Button or IconButton element | **Column** | Name | Type | Default Value | Description | | --------------- | ---------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | dataKey | `string` | | Key in Object for this column | | title | `string` | | Label for this column | | hidden | `boolean` | | To hide columns. There are cases where, search and filter on some field is required without showing Column | | titleSelected | `function` | | Title when rows are selected. Signature - `(selectedRows) => string` | | inputType | `string` | `'text-field'` | Type of Input when table is editable. Values - `'text-field', 'text-input', 'select-input', 'boolean-input', 'date-input', 'auto-complete-input'` | | fetchChoices | `function` | | function to fetch choices on demand for auto-complete-input. `(searchText, rows) => Promise(Choices)` | | choices | `function\|object[]` | `[]` | List of Choices when inputType is `'select-input'` or `'auto-complete-input'`. Object Type - `{id: string\|number, name: string}`. Function: `({row, rowIdx, rows, colIdx, dataKey}) => object[]` | | render | `function` | | render function if custom rendering is required. signature - `(value) => ?any` | | validate | `function\|function[]` | | field validation function. `(value: ?any, allValues: Object, meta: ?FieldState) => ?any` | | options | `object` | `{}` | props to be passed to underlying editable component - Input, Select, Switch etc | | disabled | `function` | | Disable Editable cells conditionally. Entire columns can be disabled using `options.disabled`. If both are provided, this func will have high priority. `(row, dataKey, rows) => bool` | | align | `string` | | Same as MUI TableCell Values - `inherit, center, justify, left, right` | | linkPath | `function` | | It will turn field to link. `(row, dataKey) => Path:String` | | length | `number` | | No. of characters to show or force text wrap depending on value of `cellOverFlow` prop of table | | filterOptions | `object` | `{}` | Filter Options - `{filter: bool, isCsvText: bool, multiSelect: bool, showValueOnly: bool}` | | headerCellProps | `object` | `{}` | MUI Table Cell Props to be passed to Header Cell | | rowCellProps | `object` | `{}` | MUI Table Cell Props to be passed to Row Cell | ## Props | Name | Type | Default Value | Description | | -------------------- | ------------------------------------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | columns | `column[]` | `[]` | List of Columns | | rows | `object[]` | `[]` | List of objects | | toolbar | `bool` | `false` | Whether to show toolbar | | toolbarDivider | `bool` | `true` | Whether to show Divider between Toolbar and Table Content or not | | title | `string` | `Mui Table` | Toolbar Title | | editable | `bool` | `false` | Table will become editable | | enableRowAddition | `bool` | `false` | Whether row addition should be enabled in editable mode. | | selectAll | `bool` | `true` | Applicable only when selectable is `true`, Select All Support | | multiSelect | `bool` | `true` | Whether multiple selection should be allowed for selectable Table | | pageSelect | `bool` | `true` | Whether only current page should be selected on select all or full table | | pageable | `bool` | `false` | Table will have pagination | | rowsPerPageOptions | `number[]` | `[10, 25]` | PageSize dropdown options | | pageSize | `number` | `10` | Number records to show in one page. | | sortable | `bool` | `false` | Columns will become sortable | | isTreeTable | `bool` | `false` | Whether table is tree table or not? | | defaultSort | `{field: string, order: 'asc\|desc'}` | | Default Sorting. default value is first column in asc order | | searchable | `bool` | `false` | Enable Search in Table | | searchKeys | `string[]` | `['name']` | Keys on which search will apply | | tableProps | `object` | `{}` | MUI Table props to be passed to Table | | idKey | `string` | `id` | Identifier Key in row object. This is used for selection and in tree table | | totalRowKey | `string` | `totalRow` | For flaging a row as total row, set true value in totalRowKey | | parnetIdKey | `string` | `parentId` | Identifier Key of parent in row object. This is used in tree table | | disabledElement | `string` | `input` | Element to use when editable element is disabled. Values - `field, input` | | cellLength | `number` | `30` | Default value of Cell Character Length when cell specific length is not provided | | cellOverFlow | `string` | `tooltip` | Content behavior when cell content is greater than cell length. Values - `tooltip, wrap` | | variant | `string` | `default` | Select Table Variant. Values - `default, excel` | | fontSize | `number` | `12` | Font Size | | emptyMessage | `string` | `No records available!` | Message when rows is empty | | expandedColor | `string\|string[]` | `none` | Background Color of Expanded Row. provide array of colors if different color is required for different level | | childIndent | `string` | `12` | Left Indentation of Child in pixel | | initialExpandedState | `string` | `null` | Inintial Expanded State. signature - `{[idKey]: true\|false}` | | selectActions | `Action[]` | `[{name: 'delete'}]` | Select Actions. Standard actions - `add, edit, delete` | | toolbarActions | `Action[]` | `[]` | Toolbar Actions. Standard actions - `column`. Not Implemented yet | | inlineActions | `function\|Action[]` | `[]` | Inline Actions. Standard actions - `add, duplicate, edit, delete`. | | footerActions | `Action[]` | `[]` | Custom Footer Actions. Standard actions - `edit`. | | chipOptions | `object` | `{}` | options passed to Chip element in FilterList | | actionPlacement | `string` | `right` | Placement of action buttons. Values - `left, right` | | rowInsert | `string` | `below` | Placement row to insert for `add, duplicate` inline actions. Values - `above, below` | | rowAddCount | `number` | `3` | Number of rows to add in editable mode | | onRowAdd | `function` | | Signature - `(rows, rowIdx, currRow) => Row Object` . Can control row to be added on inline row addition or footer row addition | | showEditableActions | `bool` | `false` | Show actions - `add, addChild, delete` in editiable mode | | showChildAddAction | `function` | | Signation - `(row, rows) => bool` | | component | `string` | `form` | HTML element for FormContent | | editing | `bool` | `false` | To Open Table in Editable mode | | defaultExpanded | `bool \|function` | | default expanded state. Signature - `bool \| (row, level) => bool`. | | selectable | `bool \| function` | `false` | Selectable Rows. `bool \| (row) => bool` | | onSubmit | `function` | | Submit function to be called when table is editable. `(values, form, onSubmitComplete) => {}`. call `onSubmitComplete` with updated rows to indicate that submit is complete | | onChange | `function` | | onChange function to be called when any value changes. `(name, value, row, form) => {}`. | | validate | `function` | | Called before onSubmit. `(values: FormValues) => Object \| Promise` | | comparator | `function` | `(a, b) => 0` | Sort Comparator when sortable is `false` | | onSelectActionClick | `function` | | Signature - `(event, action, selectedRows, onActionComplete: func) => void`. call `onActionComplete` to indicate that action is completed | | onSelect | `function` | | Function called on row select with selected ids. Signature - `(selectedIds) => void`. | | onRowClick | `function` | | Function called on row click. Signature - `(row) => void`. | | onFilter | `function` | | Function called on filter. Signature - `(filterValues) => void`. | | onToolbarActionClick | `function` | | Signature - `(event, action) => void`. | | onTreeExpand | `function` | | Function called on expand click. Signature - `(event, row, isExpanded) => void`. | | fetchChildren | `function` | | Function called to fetch children if not available. Signature - `(row) => childRows \| Promise()` | | onInlineActionClick | `function` | | Signature - `(event, action, row, onActionComplete: func) => void`. call `onActionComplete` with updated row data after action is completed | | onFooterActionClick | `function` | | Signature - `(event, action, rows, onActionComplete: func) => void`. call `onActionComplete` with updated row data after action is completed | | rowStyle | `object\|function` | `{}` | Signature - `({row, rowIdx}) => object`. function should return style object | | headerCellStyle | `object\|function` | `{}` | Signature - `({row, column, rowIdx, colIdx}) => object`. function should return style object | | cellStyle | `object\|function` | `{}` | Signature - `({row, column, rowIdx, colIdx}) => object`. function should return style object | | handleSubmitRef | `function` | | Signature - `(handleSubmit) => Void`. When External Form submit is required, We get hold of React Final Form handleSubmit by calling this method. | ## License MIT © [Jaza Software](https://jaza-soft.com) --- _Source: https://npm.io/package/@jazasoft/mui-table · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._