@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

npm install --save @jazasoft/mui-table

Usage

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 <MuiTable columns={columns} rows={rows} />
  }
}

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<Object>
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