By Nicolas Boisvert :: [email protected]
The major purposes of this project is to be able to have an async tabledata for displaying data in a fully customizable way. Try it out right here and improve it as much as you can!
I recommand a npm installation by :
npm install --save react-tabledata
This is a concrete example of how you can use it to display an array of object
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Tabledata, Tableheader } from '../src/';
class Example extends Component {
render() {
let data = [
{ id: 1, firstname: 'John', lastname: 'Doe', email: '[email protected]' },
{ id: 2, firstname: 'Johnny', lastname: 'Doewy', email: '[email protected]' },
{ id: 3, firstname: 'Johanne', lastname: 'Doewesse', email: '[email protected]' },
];
return (
<div>
<Tabledata datas={data}>
<Tableheader attribute={'firstname'}>Firstname</Tableheader>
<Tableheader attribute={'lastname'}>Lastname</Tableheader>
<Tableheader renderCell={(_content, _index, row) => (row.firstname + ' ' + row.lastname)}>Fullname</Tableheader>
<Tableheader attribute={'email'}>Email</Tableheader>
<Tableheader renderCell={(_content, _index, row) => (<button>{row.id}</button>)}>Btn</Tableheader>
</Tabledata>
</div>
);
}
}
document.addEventListener('DOMContentLoaded', () => {
ReactDOM.render(
<Example/>,
document.querySelector('#react-app')
);
});
The Tabledata
component is the table container. It requires at least a datas
attribute matching your datas. Once you'll set the state the table will be updated automatically. You also may specify a renderRow
attribute with an arrow function that returns the render for every rows. If you want to add classes to the <table>
tag, just pass in a className
attribute.
The Tableheader
matches all the <th>
tags you'll want. If you want it to display the value of an object attribute, you pass in the attribute
attribute. In the example, you can see that with have 3 Tableheader
with attribute and 2 computed header. You can also pass in an attribute renderCell
that will render each cell of the header.
Thank you for using, testing and improving it and feel free to contact me for any question.
Ending joke :
If you can't understand recursivity, read this sentence again.