React Table Component Package (WIP)

Forthcoming update : More Presets & An easy Way to build your own Presets.

On NPM : https://www.npmjs.com/package/@asklddco/react-table

DOCUMENTATION

Table Of Content

1 - Build Your Table Model

2 - Using the Table Component

3 - Customization through props

4 - Presets & Adding the Font of your Choice

5 - Presets Deeper Customization

6 - Adding some Custom Cells & Buttons to Your Table

7 - Summary - Simple React Example

Step 1 - Build your Table Model

The Table Model is essential for defining the relationships between the displayed table and the data object.

Let's now build this model into the react page component that will host your react table.

A - Instanciate the TableModel and give it a name :

This model will be key in order to define the following properties :

• Which specific datas should be extracted from your data object.
• Of which types those datas are. Mandatory since it will auto-define a sorting algorithm.
• Which name should be given to your columns (your '< th >' tag content).
• Are some of your columns sortable ?

B - Using the ColumnBuilder, you should now add some columns to your model :

As expected, with :

Here are the different methods to define your datatypes :

• setDatatypeAsString()

• setDatatypeAsNumber()

• setDatatypeAsDate()

As an example, building this model would qualify for such a data object :

You would then end up with the following three sortable columns table :

Step 2 - Using the Table Component

Now that your tableModel is defined, it can be passed as a Prop with your Datas Object to our Component :

Customization through props

Defining the number of rows by default

<DatasTable tableModel={tableModel} tableDatas={tableDatas} nRowsDefault={25}/>

nRowsDefault possible values : [10, 25, 50, 100]

Subcomponents

All those subcomponents are integrated by default.

Hiding some Subcomponents

You can hide some of those subcomponents passing the following props to your Datatable component :

Presets and Adding the Font of your Choice

Presets

To use a Preset, simply pass it as a Prop. Here is a list of the 4 available presets (more to come) :

Base Preset :

<DatasTable tableModel={tableModel} tableDatas={tableDatas} preset={basePreset.get()}/>

LightPurple Preset :

<DatasTable tableModel={tableModel} tableDatas={tableDatas} preset={lightPurplePreset.get()}/>

DarkGreen Preset :

<DatasTable tableModel={tableModel} tableDatas={tableDatas} preset={darkGreenPreset.get()}/>

DarkPurple Preset :

<DatasTable tableModel={tableModel} tableDatas={tableDatas} preset={darkPurplePreset.get()}/>

Add the Font of Your Choice

To replace a preset's default font, use the setGlobalFont method and pass the desired font family value as a parameter, similar to the CSS font-family property.

<DatasTable tableModel={tableModel} tableDatas={tableDatas} preset={darkPurplePreset.setGlobalFont("Arial").get()}/>

Presets Deeper Customization

Example using the setGlobalFont & the setHoveredElementsStyle methods :

All Available Customization Methods

You can take any existing preset and modify some of its values through those methods :

Adding Some Custom Cells

Custom Cell Component

You can fill a whole column with a custom component of your choice. It's really handy when you want to add buttons to your table that can trigger custom interactions.

Here is an example :

Notice that your component should take index and dataRow as parameters. Why? Beacause these datas will be passed to your component at render so you can use them to trigger any behavior you want.

Building a Table with this Custom Component

Here is how the previous example would be rendered inside your table :

Simple React Example