npm.io
1.0.33 • Published 1 year ago

@jazasoft/mui-table

Licence
MIT
Version
1.0.33
Deps
11
Size
1.1 MB
Vulns
0
Weekly
0
Stars
8
SummaryDependencyVersions

@jazasoft/mui-table

Advanced React Data Table using Material UI

NPM JavaScript Style Guide

Features

  • Simple Table
  • Collective Editing - Edit entire table at once
  • Sorting
  • Selection
  • Pagination
  • Filter & Search
  • Inline Editing - Edit one row at once
  • Add/Remove Row
  • Horizontal Scroll/ Force Line Wrap on Specified characters
  • Variant - default, excel
  • Tree Table
  • 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
    • TextField
    • TextInput
    • SelectInput
    • BooleanInput
    • AutoCompleteInput
    • 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