React-Tabulous 🎉

Installation

To use in your own project, install it via npm package.

npm i @syook/react-tabulous

Or you can clone and build it.

git clone [e-mail]:syook/react-tabulous.git

npm run build

The files will be under ./lib folder.

Options

a. Available Column Options

Option	Description	Type	isRequired	Default
headerName	Name of Column to be shown in header	String	true
field	field name as in the data	String	true
type	type of the field	String	true
cell	returns the value to be shown in the column cell	Function	true
isSortable	is column sortable	Boolean	false
isSearchable	is column searchable	Boolean	false
isFilterable	is column filterable	Boolean	false
omitInHideList	should the column be omitted in table and show/hide dropdown	Boolean	false
options	array of options if the type is MultiSelect or Single Select	Array	false	[]

b. Action Config Options : actions will be shown in action column in table

Option	Description	Type
isVisible	Function which returns if the action is visible or not	Function
isDisabled	Function which returns if the action is disabled or not	Function
function	Function to be executed on action event	Function
icon	Icon name to represent the action	Function
name	Name of action	string
color	color of action component	string
iconColor	color of icon	string
size	size of icon	string
inverted	to enable inverted behaviour of action element	function
iconInverted	to enable inverted behaviour of icon	boolean
className	any custom classname to be applied for action element	string
iconClassName	any custom classname to be applied for icon	string
hasCustomComponent	if the action is any custom component other than button	boolean
customComponent	the component that needs to returned if the action has custom component	function

c. Available Types

Type	Filter queries available	Extra props needed
String	contains, does not contains, is, is not, is empty, is not empty
Date	is, is not, is after, is before, is empty, is not empty
Number	=, =/ , < , <=, > , >= , is empty, is not empty
SingleSelect	has any of, has none of, is empty, is not empty	options: []
MultiSelect	is, is not, is empty, is not empty,	options: []

Example

...
 
import ReactTabulous from 'react-tabulous';
import format from 'date-fns/format'
import { Button, Input } from 'semantic-ui-react';
 
...
 
onDelete = ids => {
  console.log('onDelete', ids);
};
 
onShow = rowObject => {
  console.log('onShow', rowObject);
};
 
onEdit = rowObject => {
  console.log('onEdit', rowObject);
};
 
onInputChange = ({ rowObject, value: newValue }) => {
  console.log({ rowObject, newValue });
};
 
columnDefs = [
  {
    headerName: 'Name',
    field: 'name',
    type: 'String',
    cell: rowObject => (
      <Input value={rowObject.name} onChange={(_e, { value }) => this.onInputChange({ value, rowObject })} />
    ),
    isSortable: true,
    isSearchable: true,
    isFilterable: true,
  },
  {
    headerName: 'Description',
    field: 'description',
    type: 'String',
    cell: rowObject => rowObject.description,
    isSortable: true,
    isSearchable: true,
    isFilterable: true,
    isResizable: true,
  },
  {
    headerName: 'Category',
    field: 'category',
    type: 'SingleSelect',
    cell: rowObject => rowObject.category,
    options: ['Grocery', 'Electronics', 'Home', 'Shoes', 'Computers', 'Outdoors', 'Clothing'].map((category, index) => ({
      value: index,
      label: category,
    })),
    isSortable: true,
    isSearchable: true,
    isFilterable: true,
  },
  {
    headerName: 'Price',
    field: 'price',
    type: 'Number',
    cell: rowObject => rowObject.price,
    isSortable: true,
    isSearchable: true,
    isFilterable: true,
    isResizable: true,
  },
  {
    headerName: 'Expertise',
    field: 'isExpertised',
    type: 'Boolean',
    cell: rowObject => (rowObject.isExpertised ? 'Yes' : 'No'),
    isSortable: true,
    isSearchable: false,
    isFilterable: true,
  },
  {
    headerName: 'Availability',
    field: 'availability',
    type: 'MultiSelect',
    cell: rowObject => rowObject.availability.join(', '),
    options: ['Yes', 'No', 'Maybe'].map(a => ({ value: a, label: a })),
    isSortable: true,
    isSearchable: false,
    isFilterable: true,
  },
  {
    headerName: 'Started at',
    field: 'created',
    cell: rowObject => format(new Date(rowObject.created), 'dd-MMM-yyyy hh:mm a'),
    type: 'Date',
    isSortable: true,
    isSearchable: false,
    isFilterable: true,
    isResizable: true,
  },
];
 
updatingObjectId = () => false;
 
actionDefs = [
  {
    name: 'Show',
    isVisible: _rowObject => true,
    isDisabled: rowObject => this.updatingObjectId === (rowObject['id'] || rowObject['_id']),
    isLoading: rowObject => this.updatingObjectId === (rowObject['id'] || rowObject['_id']),
    function: this.onShow,
    icon: 'eye',
    color: '#85C1E9',
  },
  {
    name: 'Delete',
    isVisible: rowObject => !rowObject.isDeleted,
    isDisabled: rowObject => this.updatingObjectId === (rowObject['id'] || rowObject['_id']),
    isLoading: rowObject => this.updatingObjectId === (rowObject['id'] || rowObject['_id']),
    function: rowObject => this.onDelete(rowObject),
    icon: 'trash',
    color: '#E8515D',
  },
];
 
bulkActionDefs = [{ action: 'delete', function: this.onDelete }];
 
customComponents = () => (
  <>
    <Button disabled size="small" onClick={() => null}>
      Button 1
    </Button>
    <Button onClick={() => null}>Button 2</Button>
  </>
);
 
...
 
<ReactTabulous
  actionDefs={this.actionDefs}
  bulkActionDefs={this.bulkActionDefs}
  data={this.state.data || []}
  includeAction={true}
  mandatoryFields={['Name']}
  name={'Table Name'}
  columnDefs={this.columnDefs}>
  {this.customComponents}
</ReactTabulous>
 
...

Contributing Guidelines

Please refer CONTRIBUTING.md

License

MIT License