A light react table package

#react #webdev #beginners #javascript

Hi everybody :)

Creating a table in reactJS with selectable rows has been the biggest challenge for me, So I decided to create a light package that help me.

you can visit its storybook online Here.

Install via NPM

npm install --save react-custable

You only need two variables for configuration, column and data

import { Table } from 'react-custable';

//the fieldName should be as same as data's key
const column = [
  { fieldName: 'name', title: 'Name', width: '180px', sortable: true },
  { fieldName: 'email', title: 'Email', width: '180px', sortable: true },
];

const data = [
  { id: '1', name: 'name one', email: 'mailone@mail.com' },
  { id: '2', name: 'name two', email: 'mailtwo@mail.com' },
];
<div className="App">
  <Table columns={columns} data={data} />
</div>;

what's column props?

the 'fieldName' is the key name of your data and 'title' is the table header for that data and these are mandatory.

Optional column configuration

width: you can assign certain width to each column
sortable: this table can sort columns data if these are string
sortFunc: if the column's data isn't string you can pass a function that knows how to sort your data.
fixed: if you want to fixed the column for horizontal scroll (only work for first column or last column)
render: if you want to render custom component, you should pass a function that get row (data of current row) and index (index of current row) and your function should return a Cell object

{
  value: React.ReactNode,
  props: { [key: string]: string }, //props will be applied to td elemenet like colspan
}

Option	Type	Description
fieldName*	string	data key
title*	string	column header title
width	string(px)	column width (Default is auto)
fixed	string ('left' or 'right')	to fix column
sortable	boolean	Default is false
sortFunc	( a , b ) => number	sort function should return -1 when a < b , 1 when a > b , 0 when a = b
render	(row, index) => Cell	for rendering custom component in cell

As you've seen before 'data' and 'column' are mandatory for the table, let's see what are optional for the table

Option	Type	Description
column*	Column[]	array of columns
data*	{ id:string, ... }[]	array of data
isSelectable	boolean	to enable checkboxes for rows
selectRowHandler	(selectedRowIds) => void	the callback function will receiver selected row IDs
selectedRowKeys	string[]	default value for selected rows
pagination	{ currentPage: number; totalCount: number; pageLimit: number; }	values for table pagination
pageChangeHandler	(pageNumner: number) => void	the callback for handle page changes
rowClickHandler	(row: Row) => void	the callback for handle row click
showLoading	boolean	show spinner over table