adm-table

A Datatable for React.

Based on react-table

Instalation

npm i --save adm-table

Documentation

Also some fields supports from react-table

AdmTable

• title: string
  • Table title
• data: array
  • Required
  • Table data
• columns: array
  • Required
  • Table columns
• editable: object
  • Table default actions
  • isAddDisabled: func(props)
    • Disable add action if return true
  • isUpdateDisabled: func(props)
    • Disable update action if return true
  • isDeleteDisabled: func(props)
    • Disable delete action if return true
  • isAddHidden: func(props)
    • Hide add action if return true
  • isUpdateHidden: func(props)
    • Hide update action if return true
  • isDeleteHidden: func(props)
    • Hide delete action if return true
  • onRowAdd: async func(newData, oldData, rowData)
    • On row add callback
  • onRowUpdate: async func(newData, oldData, rowData)
    • On row update callback
  • onRowDelete: async func(newData, oldData, rowData)
    • On row delete callback
• actions: array|func(props)
  • Table custom actions
  • isDisabled: bool
    • Disable action
  • isHidden: bool
    • Show action
  • icon: string
    • Action icon gets from material-ui
  • isToolbarAction: bool
    • Show action in toolbar
  • onClick: func(event, row)
    • On click action callback
  • tooltip: string
    • Show action tooltip
  • customRender: func(row)
    • Custom action render
• style: object
  • Set table styles
• onAcceptRowEditing: func
  • Trigger on accept row editing
• onCancelRowEditing: func
  • Triger on cancel row editing
• onRowClick: func(rowData)
  • Triger on row click
• onRowClickAction: string
  • update
    • Update clicked row
  • delete
    • Delete clicked row
  • click
    • Handle on click row
  • Default click
• filterValue: string
  • Set filter value
• editProps: func(rowData)
  • Return edit data
• onChangeRowsPerPage: func(value)
  • Triger on change rows per page
• isLoading: bool
  • Show loading indicator
  • Default false
• externalState: object
  • Pass external state object
  • Default {}
• localization: object
  • Set table localiazation strings
  • search: string
    • Default Search
  • actions: string
    • Default Action
  • add: string
    • Default Add
  • edit: string
    • Default Edit
  • delete: string
    • Default Delete
  • rows: string
    • Default Rows
  • rowsPerPage: string
    • Default Rows per page
• options: object
  • Set table options
  • isShowToolbar: bool
    • Show table toolbar
    • Default: true
  • isShowPagination: bool
    • Show table pagination
    • Default: true
  • isShowSearch: bool
    • Show table global search
    • Default: true
  • isSorting: bool
    • Show column sorting icon
    • Default: true
  • isFiltering: bool
    • Show column filtering
    • Default: false
  • isDensePaddings: bool
    • Table dense paddings
    • Default: false
  • isAllBorders: bool
    • Add borders for cells
    • Default: false
  • cellStyles: func(props)
    • Custom cell styles
    • Default: {}
  • rowStyles: func(props)
    • Custom row styles
    • Default: {}
  • pageSize: number
    • Set rows per page
    • Default: 10
  • pageSizeOptions: array
    • Set rows per page list
    • Default: [5, 10, 25, 'all']
• isValid: bool
  • Check is edit data valid
• validationErrorMessage: string
  • Show message if isValid is false
• tableRef: element
  • Get table container ref

Columns

• title: string
  • Required
  • Show column title
• field: string
  • Required
  • Get field from data and render it
• hideFiltering: bool
  • Hider filter from column
• width: number|string
  • Column width
• editableWidth: number|string
  • Set edit mode field width
• editableStyles: object:
  • Set edit mode field styles
• filter: string|func(rows, id, filterValue)
  • Set custom or predefined filter
• tooltip: string
  • Show column title tooltip
• editable: string
  • always
    • Always show field in edit mode
  • never
    • Never show field in edit mode
  • onAdd
    • Show field only on add
  • onEdit
    • Show filed only on edit
  • Default always
• emptyValue: string|number
  • Show if data value is empty
• type: string
  • bool
    • Show checbox input for field
  • number
    • Show number input for field
  • date
    • Show date input for field
  • datetime
    • Show datetime input for field
  • time
    • Show time input for field
  • color
    • Show color picker for field
• defaultValue: number|string
  • Sets default field value
• isRequired: bool
  • Mark as required field in edit mode
• customRender: func(props)
  • Must return jsx. Custom render cells data
• customEditRender: func(props)
  • Must return jsx. Custom render edit cells data
• columns: array
  • Used for multiple columns. Allow all fields from column
• cellStyle: object
  • Set cell styles
• headerStyle: object
  • Set header styles
• columnStyle: object
  • Set column styles
• lookup: object
  • Show select input for field
  • format { value: title }
• ampm: bool
  • Show time in ampm format
  • Default: true