1.0.4 • Published 4 years ago
@markdijkstra/react-easy-table v1.0.4
react-easy-table
Basic react table component. This component will return a very basic and easy to use table.
How install
npm i @markdijkstra/react-easy-table
How to use
import {EasyTable} from '@markdijkstra/react-easy-table'
const TableHeading = [
'First cell heading',
'Second cell heading',
'First cell heading'
];
const TableCaption = 'Caption message';
const TableRows = [
[
'First cell, first row',
'Second cell, first row',
'Third cell, first row'
],
[
'First cell, second row',
'Second cell, second row',
'Third cell, second row'
],
[
'First cell, last row',
'Second cell, last row',
'Third cell, last row'
],
];
const TableHeading = [
'First cell footer',
'Second cell footer',
'Third cellfooter'
];
<EasyTable caption={TableHeading} rows={TableRows} footer={TableFooter} className="table_class" />
Output HTML
<table>
<caption>Caption message</caption>
<thead>
<tr>
<th>First cell heading<th>
<th>Second cell heading<th>
<th>Third cell heading<th>
</tr>
<thead>
<tbody>
<tr>
<td>First cell, first row<td>
<td>Second cell, first row<td>
<td>Third cell, first row<td>
</tr>
<tr>
<td>First cell, second row<td>
<td>Second cell, second row<td>
<td>Third cell, second row<td>
</tr>
<tr>
<td>First cell, last row<td>
<td>Second cell, last row<td>
<td>Third cell, last row<td>
</tr>
<tbody>
<tfoot>
<tr>
<td>First cell footer<td>
<td>Second cell footer<td>
<td>Third cell footer<td>
</tr>
<tfoot>
</table>