© 2020 Mytabworks.

Reatable (not publish yet)

is a react dynamic table which displays rows of data. It is so light with catchy setting and cognitive design structure. reatable is not limited with it's design and it's features since most of it's aspects are cuztomizable so table's creativity is endless within its bootstrap.

Installation #

npm i reatable
Imports #

import { Table, TableContent, Pagination, Loader, usePagination, useSort, useFilter } from "reatable"
Getting Started #

it is the basic example for reatable.

First Name
First Name
Last Name
Last Name
Age
Age
Gender
Gender
DrewKai24male
FrankieRiley70male
BrookMason38female
WestEmery31male
WestBailey49female

Table or TableContent setting className attribute will remove the default stylesheet in table to prevent conflict to the setted class.

Table property data must be an array of object that contains id or key to distinguish it from each other to prevent bugs.

Mutating Table Cell #

you can mutate the appearance and elements of table cell

First Name
First Name
Last Name
Last Name
Age
Age
Gender
Gender
DrewKai24male
FrankieRiley70male
BrookMason38female
WestEmery31male
WestBailey49female
Column Group #

you can group your table column headers.

SyntaxError: Unexpected token (31:78)
27 :                 columns: [
28 :                     {
29 :                         dataIndex: "gender",
30 :                         label: "Male",
31 :                         render: (gender) => gender === "male" && "<span role="img">✔️</span>"
                                                                                   ^
Tip

you can group column headers as many group as you like.

Table property data must be an array of object that contains id or key to distinguish it from each other to prevent bugs.

Table With Pagination #

whenever the data is too big you need to paginate which is built-in in reatable.

First Name
First Name
Last Name
Last Name
Age
Age
Gender
Gender
EliCorey34male
AugustShawn59male
ShawnRiver88male
RowanMaxwell43female
PatLake100male

pagination will only be applicable if you assign value in pagination property pageSize.

Sortable Table #

it has built-in feature column sorting.

First Name
First Name
Last Name
Last Name
Age
Age
Gender
Gender
ValClay93female
ShawnRiver88male
RudyAvery73female
RowanMaxwell43female
ReedGabriel37male

the column property sortable can be assign boolean that will be sorted by the built-in sorting algorithm of the component. or you can make your own algorithm by assigning function that compares the two argument.

built-in sorting algorithm is not applicable in asynchronous table.

Collapsible Table #

you can make a collapsible table.

First Name
First Name
Last Name
Last Name
Age
Age
Gender
Gender
FrankieRiley70male
Collapsible Table Using Button #

you can make a collapsible table using button in columns render.

First Name
First Name
Last Name
Last Name
Age
Age
Gender
Gender
FrankieRiley70male
Table Filtration #

it has built-in feature column filtering.

First Name
First Name
Last Name
Last Name
Age
Age
Gender
Gender
EliCorey34male
AugustShawn59male
ShawnRiver88male
RowanMaxwell43female
PatLake100male

built-in filtering algorithm is not applicable in asynchronous table.

Asynchronous Table #

you can make asynchronous table.

First Name
First Name
Last Name
Last Name
Age
Age
Gender
Gender
JesseJules73female
TylerAiden74female
AshRemy22male
WinterAndy32female
DarylCampbell37male

every action you made the loader will be shown because the table is asynchronous which makes it to wait for the sever response.

Customizable Table Interfaces #

you can customize your table appearance.

First Name
First Name
Last Name
Last Name
Age
Age
Gender
Gender
JesseJules73female
TylerAiden74female
AshRemy22male
WinterAndy32female
DarylCampbell37male

all the component and hooks are only applicable inside Table component.

passing the className in Table will be unnecessary, since you can access directly to the TableContent to assign className.

Customize Loader #

you can customize your loader appearance.

First Name
First Name
Last Name
Last Name
Age
Age
Gender
Gender
JesseJules73female
TylerAiden74female
AshRemy22male
WinterAndy32female
DarylCampbell37male

Loader will only be visible when the table is asynchronous.

Customizable Pagination Component #

you can customize pagination container and list and still using the Pagination components algorithm.

First Name
First Name
Last Name
Last Name
Age
Age
Gender
Gender
JesseJules73female
TylerAiden74female
AshRemy22male
WinterAndy32female
DarylCampbell37male
Create Your Own Pagination #

if you don't like the overall Pagination component model, then you can create your own by using usePagination.

First Name
First Name
Last Name
Last Name
Age
Age
Gender
Gender
JesseJules73female
TylerAiden74female
AshRemy22male
WinterAndy32female
DarylCampbell37male
ElliottRoan77female
EmersonKelsey76male
SamKelly52male
TatumLandry16male
AmariJayden82female
Changable Page Size #

there is no built-in component for page size changer but you can make your own by adding a few lines of code.

First Name
First Name
Last Name
Last Name
Age
Age
Gender
Gender
JesseJules73female
TylerAiden74female
AshRemy22male
WinterAndy32female
DarylCampbell37male
show
Create Filter By First Letters #

you can do all you want on filtering by using hook useFilter, this is just one of many things that you can do.

Filter By:
First Name
First Name
Last Name
Last Name
Age
Age
Gender
Gender
JesseJules73female
TylerAiden74female
AshRemy22male
WinterAndy32female
DarylCampbell37male
show
Create Filter By Search #

filter by search is so typical in dynamic table. this is just the idea to create greater things.

Filter By:
First Name
First Name
Last Name
Last Name
Age
Age
Gender
Gender
JesseJules73female
TylerAiden74female
AshRemy22male
WinterAndy32female
DarylCampbell37male
show
Customize TableContent Row & Cell #

you can customize and create your own features on the table row(tr) and cell(td) in your own perspective, design and functionalities by using useColumn hooks, you can get your column settings you entered in the Table property columns. the customize cell example is editable and it is just one of many features you can create.

First Name
First Name
Last Name
Last Name
Age
Age
Gender
Gender
JesseJules73female
TylerAiden74female
AshRemy22male
WinterAndy32female
DarylCampbell37male

you can use hooks especially useColumn to get the settings on columns and create your very own features.

Customize TableContent Empty Data #

if you don't like the given empty data design you can make your own.

First Name
First Name
Last Name
Last Name
Age
Age
Gender
Gender
Empty Data....

you can use the given hooks in this customizes components.

Customize TableContent Column Header #

it is just a mediocre example on how you create a column header with sortable. it is just an idea for you to create greater header.

First NameLast NameAgeGender
JesseJules73female
TylerAiden74female
AshRemy22male
WinterAndy32female
DarylCampbell37male

you can use the given hooks in this customizes components.

Passing A Row Data On Modal #

it is an idea on how to pass a data on modal, since modal is commonly use to handle changes in table.

First Name
First Name
Last Name
Last Name
Age
Age
Gender
Gender
Action
Action
JesseJules73female
TylerAiden74female
AshRemy22male
WinterAndy32female
DarylCampbell37male
Table Selection #

it is an example to apply a selection on your table with sending multple data in modal.

First Name
First Name
Age
Age
Gender
Gender
Jesse73female
Tyler74female
Ash22male
Winter32female
Daryl37male

API

Table #

It is the table wrapper.

Property
Property
Type
Type
Default
Default
Description
Description
dataobject[]-The data of the table which is to be display.
classNamestring-The className of your table.
asynchronousbooleanfalseTo determine if the table data will be requested when action is pagination, sort, and filters. Plus, The loader will be activated while waiting on the request.
TableContent #

It is the table itself.

Property
Property
Type
Type
Default
Default
Description
Description
classNamestring-The className of your table.
Pagination #

It is the pagination.

Property
Property
Type
Type
Default
Default
Description
Description
classNamestringrt-paginationThe className of your pagination.
nextLabelstring | element'next'The label of the next button.
prevLabelstring | element'prev'The label of the prev button.
Loader #

It is the loader when the table is asynchronous.

Property
Property
Type
Type
Default
Default
Description
Description
childrenelement<div className="rt-loader"/>Your customize element loader.

Hooks

usePagination #

It is use to create your own component pagination.

Property
Property
Type
Type
Default
Default
Description
Description
const {
allowPagination,boolean-It use to determine if pagination will be display.
totalPages,boolean-It is the total pages of the pagination.
page,number-It is the number of the current page.
setPage,function-It is use to assign the current page in the table state.
} = usePagination()
useSort #

It is use to create your own component sort. it is useful in Table property as Column.

Property
Property
Type
Type
Default
Default
Description
Description
const {
sortable,boolean-It is use to determine if column is sortable.
sortOrder,'asc' | 'desc' | null-It is the state order currently the column is in.
handleSort,function-It is the sort handler that suppose to be assign in the certain element property onClick
} = useSort(
dataIndexstring-To get the column setting.
)
useFilter #

It is use to create your own component filteration.

Property
Property
Type
Type
Default
Default
Description
Description
const {
filterable,boolean-It is use to determine if column is filterable.
filters,object[]-It is the content you put in Table property columns
filterSearch,object-It is the content you put in Table property columns
filterMultiple,boolean-It is the content you put in Table property columns
setFilter,function-It is use to assign filters in the table state.
} = useFilter(
dataIndexstring-To get the column setting.
)
useColumn #

It is use to get the column settings in Table property columns.

Property
Property
Type
Type
Default
Default
Description
Description
const
= useColumn(
dataIndexstring-To determine which column setting you are getting.
)
Warning!

In this pre-deployed stage, most of the library you will witness has yet been publish or update in npm.