Advanced React Data Table using Material UI
npm install @jazasoft/mui-table> Advanced React Data Table using Material UI
 
- [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
``bash`
npm install --save @jazasoft/mui-table
`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
}
}
`
Action
| Name | Type | Default Value | Description |
| ------- | -------------- | ------------- | ----------------------------------------------------------- |
| name | string | | Required. Name of action |string
| tooltip | | | Optional. Tooltip for the action |ReactElement
| icon | | | Icon for this action. Required for custom actions. |object
| options | | | options will be passed down to Button or IconButton element |
Column
| Name | Type | Default Value | Description |
| --------------- | ---------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| dataKey | string | | Key in Object for this column |string
| title | | | Label for this column |boolean
| hidden | | | To hide columns. There are cases where, search and filter on some field is required without showing Column |function
| titleSelected | | | Title when rows are selected. Signature - (selectedRows) => string |string
| inputType | | 'text-field' | Type of Input when table is editable. Values - 'text-field', 'text-input', 'select-input', 'boolean-input', 'date-input', 'auto-complete-input' |function
| fetchChoices | | | function to fetch choices on demand for auto-complete-input. (searchText, rows) => Promise(Choices) |function\|object[]
| choices | | [] | 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[] |function
| render | | | render function if custom rendering is required. signature - (value) => ?any |function\|function[]
| validate | | | field validation function. (value: ?any, allValues: Object, meta: ?FieldState) => ?any |object
| options | | {} | props to be passed to underlying editable component - Input, Select, Switch etc |function
| disabled | | | 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 |string
| align | | | Same as MUI TableCell Values - inherit, center, justify, left, right |function
| linkPath | | | It will turn field to link. (row, dataKey) => Path:String |number
| length | | | No. of characters to show or force text wrap depending on value of cellOverFlow prop of table |object
| filterOptions | | {} | Filter Options - {filter: bool, isCsvText: bool, multiSelect: bool, showValueOnly: bool} |object
| headerCellProps | | {} | MUI Table Cell Props to be passed to Header Cell |object
| rowCellProps | | {} | MUI Table Cell Props to be passed to Row Cell |
| Name | Type | Default Value | Description |
| -------------------- | ------------------------------------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| columns | column[] | [] | List of Columns |object[]
| rows | | [] | List of objects |bool
| toolbar | | false | Whether to show toolbar |bool
| toolbarDivider | | true | Whether to show Divider between Toolbar and Table Content or not |string
| title | | Mui Table | Toolbar Title |bool
| editable | | false | Table will become editable |bool
| enableRowAddition | | false | Whether row addition should be enabled in editable mode. |bool
| selectAll | | true | Applicable only when selectable is true, Select All Support |bool
| multiSelect | | true | Whether multiple selection should be allowed for selectable Table |bool
| pageSelect | | true | Whether only current page should be selected on select all or full table |bool
| pageable | | false | Table will have pagination |number[]
| rowsPerPageOptions | | [10, 25] | PageSize dropdown options |number
| pageSize | | 10 | Number records to show in one page. |bool
| sortable | | false | Columns will become sortable |bool
| isTreeTable | | false | Whether table is tree table or not? |{field: string, order: 'asc\|desc'}
| defaultSort | | | Default Sorting. default value is first column in asc order |bool
| searchable | | false | Enable Search in Table |string[]
| searchKeys | | ['name'] | Keys on which search will apply |object
| tableProps | | {} | MUI Table props to be passed to Table |string
| idKey | | id | Identifier Key in row object. This is used for selection and in tree table |string
| totalRowKey | | totalRow | For flaging a row as total row, set true value in totalRowKey |string
| parnetIdKey | | parentId | Identifier Key of parent in row object. This is used in tree table |string
| disabledElement | | input | Element to use when editable element is disabled. Values - field, input |number
| cellLength | | 30 | Default value of Cell Character Length when cell specific length is not provided |string
| cellOverFlow | | tooltip | Content behavior when cell content is greater than cell length. Values - tooltip, wrap |string
| variant | | default | Select Table Variant. Values - default, excel |number
| fontSize | | 12 | Font Size |string
| emptyMessage | | No records available! | Message when rows is empty |string\|string[]
| expandedColor | | none | Background Color of Expanded Row. provide array of colors if different color is required for different level |string
| childIndent | | 12 | Left Indentation of Child in pixel |string
| initialExpandedState | | null | Inintial Expanded State. signature - {[idKey]: true\|false} |Action[]
| selectActions | | [{name: 'delete'}] | Select Actions. Standard actions - add, edit, delete |Action[]
| toolbarActions | | [] | Toolbar Actions. Standard actions - column. Not Implemented yet |function\|Action[]
| inlineActions | | [] | Inline Actions. Standard actions - add, duplicate, edit, delete. |Action[]
| footerActions | | [] | Custom Footer Actions. Standard actions - edit. |object
| chipOptions | | {} | options passed to Chip element in FilterList |string
| actionPlacement | | right | Placement of action buttons. Values - left, right |string
| rowInsert | | below | Placement row to insert for add, duplicate inline actions. Values - above, below |number
| rowAddCount | | 3 | Number of rows to add in editable mode |function
| onRowAdd | | | Signature - (rows, rowIdx, currRow) => Row Object . Can control row to be added on inline row addition or footer row addition |bool
| showEditableActions | | false | Show actions - add, addChild, delete in editiable mode |function
| showChildAddAction | | | Signation - (row, rows) => bool |string
| component | | form | HTML element for FormContent |bool
| editing | | false | To Open Table in Editable mode |bool \|function
| defaultExpanded | | | default expanded state. Signature - bool \| (row, level) => bool. |bool \| function
| selectable | | false | Selectable Rows. bool \| (row) => bool |function
| onSubmit | | | Submit function to be called when table is editable. (values, form, onSubmitComplete) => {}. call onSubmitComplete with updated rows to indicate that submit is complete |function
| onChange | | | onChange function to be called when any value changes. (name, value, row, form) => {}. |function
| validate | | | Called before onSubmit. (values: FormValues) => Object \| Promise
MIT © Jaza Software