Fast and easily configurable tables in React. Has some built-in, easy to use APIs, but also fully customizable.
- Installation
- Basic usage
- Customization - Advanced styling - Full style cusomization
- Editing (add, delete, edit rows)
npm install [--save] react-smooth-tableSimple example:
import React from 'react';
import { Table } from 'react-smooth-table';
const TableComponent = () => {
const columns = [
{ headerFor: 'name', title: 'Name' },
{ headerFor: 'phoneNum', title: 'Phone number' },
];
const data = [
{ name: 'John Doe', phoneNum: '123456789' },
{ name: 'Jane Doe', phoneNum: '987654321' },
];
return <Table columns={columns} data={data} />;
};So in the most basic use-case the Table component takes two props: columns and data. Both of them is an array of objects.
Note: The value for the headerFor key must be the same as the key of the data which you want to display.
Note: Any key-values in data which doesn't have a headerFor in the columns won't be displayed.
The Table component can take the following props:
| Prop | Type | Explanation |
|---|---|---|
| height | string (eg: '100%' | The height of the table. |
| width | string (eg: '500px' | The width of the table |
| padding | string (eg: '1em') | Padding between the table and its outer container |
| stickyHeader | boolean | If true, the header stays at the top when scrolling |
| striped | boolean | If true, every second row has a darker color (can be customized) |
| stripeColor | string (eg: '#f0f0f0") | The color of the text in the striped rows. Can be any valid css color value |
| stripeBg | string (eg: 'silver') | The backgroundcolor of the striped rows. Can be any valid css color value |
| headerColor | string (eg:'rgba(0, 0, 0, 0.5)' | Textcolor of the header. Can be any valid css color value. |
| headerBg | string | Bacgkround color of the header. Can be any valid css color value. |
| editable | boolean | If true, it allows the access to the editComponents prop |
| editComponents | object | Pass in callbacks and components to the edit/add/delete operations examples here |
| onRowClick | function | You can pass in a callback which takes the data of the row that's been clicked on |
| onOrder | function | A callback that's fired when the ordering is changed by clicking on one of the header items. It gets 2 arguments: order and orderBy. Order can be one of 'ASC' or 'DESC', and orderBy is the headerFor of the column |
You can also style a single column, by passing in more arguments into the respective column object, for example:
const columns = [
{ headerFor: 'id', title: 'Identification', width: '50px', align: 'right' },
];Possible props for the column object:
| Prop | Type | Explanation |
|---|---|---|
| width | string | Width of the column. Note: can't be smaller than the text in the header |
| align | string | Text-alignment for the column |
| headerBackground | string | Custom background color for the header in that column |
| textColor | string | Text-color for the header of that column |
| headerStyle | object | Style object for the header of that column. |
| cellStyle | object | Style object for every td in that column |
| component | function | A custom component can be returned from this function. The function itself receives the rowData as argument |
const data = [
{ id: 1, avatar: 'https://source.unsplash.com/random' }
{ id: 2, avatar: 'https://source.unsplash.com/random' }
]
const columns = [
{
headerFor: 'avatar',
title: 'Avatar',
component: (rowData) => {
return rowData.avatar && (
<img
src={rowData.avatar}
style={{width: '50px', height: '50px', borderRadius: '50%'}}
alt="custom_component_avatar"
/>
)
}
...
]There are 3 basic "editing" options: adding, removing, and editing the table rows. You can turn this option on by passing editable prop to the Table component, and also an editComponents object, which defines the behaviour and the component for the specific buttons. Keep in mind, that component is optional, but passing in a callBack is required.
const editComponents = {
onEdit: {
component: <WhateverCustomButtonOrIcon />,
callBack: (rowData) => {
// Talk to the backend here maybe.
};
},
onDelete: {
component: <WhateverCustomButtonOrIcon />,
callBack: (rowData) => {
// Talk to the backend here maybe.
};
},
onAdd: {
component: <WhateverCustomButtonOrIcon />,
callBack: (rowData) => {
// Talk to the backend here maybe.
};
}
};
// And later when you call the Table component:
<Table columns={columns} data={data} editable editComponents={editComponents} />Note: Each one of these editing options are optional, you can have either one, or all of them as you wish.