@jazasoft/mui-table

> Advanced React Data Table using Material UI

 

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

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