To represent data effectively table is one of the best ways to arrange information in an interactive way. Manually creating and styling a table is no longer efficient. React has a much wide variety of data table libraries. A ready-to-use library saves the developer time and costs and tale less effort.
Before using a table make sure to publish and manage your customized tables in cloud component hubs like Bit (Github). It’ll save you time and make sure you don’t bore yourself to death by repeating yourself.
Let’s lookout for the most popular React table libraries:
Material table
Material table is a powerful way of representing data in table format in react application. It is following the material design concept. It is one of the most popular open-source libraries available in the React space and provides different individual components. These components can be used to tackle the styling depending on the complexity.
This is one of the most used React Table libraries with more than 2,300 stars on GitHub.
Advantages
•Actions based on one or multiple rows
•Feature-packed (Custom Column Rendering, Editable, Detail panel for each row)
•Export to CSV
•Many properties that can be used to customize the UI and behavior
•Extensive documentation
To see it in action, install the library by running the following commands in a React app from a terminal window:
yarn add material-table @material-ui/core
npm install @material-ui/core
npm install material-table
Import the material-icons library in one of the two following methods:
1. Directly reference the style sheet in HTML:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
2. Install Material Icons:
npm install @material-ui/icons
create a component named MaterialTable.js and import material-table.
import MaterialTable from "material-table";
Initialize the table data inside the function “Table” as follows.
export const Table = () => {
const data = [
{ name: "John", email: "john@gmail.com", age: 12, gender: "Male" },
{ name: "Bren", email: "bren@gmail.com", age: 24, gender: "Male" },
{ name: "Marry", email: "marry@gmail.com", age: 18, gender: "Female" },
{ name: "Shohail", email: "shohail@gmail.com", age: 25, gender: "Male" },
{ name: "Aseka", email: "aseka@gmail.com", age: 19, gender: "Female" },
{ name: "Meuko", email: "meuko@gmail.com", age: 12, gender: "Female" },
];
};
Let’s define the columns for the material data table as follows:
const columns = [
{
title: "Name",
field: "name",
},
{
title: "Email",
field: "email",
},
{
title: "Age",
field: "age",
},
{
title: "Gender",
field: "gender",
},
];
Now bind the columns in a MaterialTable tag within the return statement as follows:
return (
<MaterialTable title="Employee Details" data={data} columns={columns} />
);
Define the MaterialTable in the App.js file. Some options can be defined along with the table definition as follows:
<MaterialTable
title="Employee Details"
data={data}
columns={columns}
options={{ search: true, paging: false, filtering: true, exportButton: true }}
/>
Finally, import the table component into the App.js file as follows:
function App() {
return (
<div className="app">
<div className="containers">
<Table></Table>
</div>
</div>
);
}
RC table
RC table table is another simple and light weight React table library with 650+ github stars. It is ideal if you want to use your own styling on top of the existing behaviour.
Advantages
•Light-weight
•Filter data via dropdown menus on the column headings
•Many examples with source code
Disadvantage
•Less documentation
Start by installing the corresponding library.
npm install rc-table
Create a component named RcTable.js and import the rc-table module:
import Table from "rc-table";
Now define the columns of the table within the export statement as follows:
export const Rctable = () => {
const columns = [
{
title: "Name",
dataIndex: "name",
key: "name",
width: 100,
},
{
title: "Age",
dataIndex: "age",
key: "age",
width: 100,
},
{
title: "Email",
dataIndex: "email",
key: "email",
width: 200,
},
{
title: "Permanent",
dataIndex: "permanent",
key: "permanent",
width:100,
},
];
};
Insert some data to be displayed in the table:
const data = [
{
name: "Jack",
age: 28,
email: "jack@gmail.com",
key: "1",
permanent: "yes",
},
{
name: "Rose",
age: 36,
email: "rose@gmail.com",
key: "2",
permanent: "no",
},]
Now bind the columns in a Table tag within the return statement as follows:
return (
<Table
columns={columns}
data={data}
tableLayout="auto"
/>
);
To render a table, import the RcTable component into the App.js file:
import { Rctable } from "./components/rctable";
function App() {
return (
<div className="app">
<div className="containers">
<Rctable />
</div>
</div>
);
}
Rsuite-Table
This is versatile React Table component that supports virtualization, fixed headers and columns, tree views, and much more. One of the best things about this library, it makes sorting pretty simple.
Advantages
•Uncommon features (Right-to-left, adjustable column widths, expandable child nodes)
•Many components (Loaders, Buttons, Modals)
•Extensive documentation
Disadvantages
•Customizing styling can be complicated due to the complex default styling rules
**Install the relevant package via NPM:
npm install rsuite-table
Now create a component named rsuiteTable.js and import the rsuite-table module:
import { Table } from "rsuite-table";
Create a JSON file named users.json and add a list of users to it:
[{
"id": 1,
"avartar": "https://s3.amazonaws.com/uifaces/faces/twitter/justinrob/128.jpg",
"city": "New Amieshire",
"email": "Leora13@yahoo.com",
"firstName": "Ernest Schuppe SchuppeSchuppeSchuppeSchuppeSchuppeSchuppe Schuppe",
"lastName": "Schuppe",
"street": "Ratke Port",
"zipCode": "17026-3154",
"date": "2016-09-23T07:57:40.195Z",
"bs": "global drive functionalities",
"catchPhrase": "Intuitive impactful software",
"companyName": "Lebsack - Nicolas",
"words": "saepe et omnis",
"sentence": "Quos aut sunt id nihil qui.",
"stars": 820,
"followers": 70
}
]
Import the users.json and rsuite-table.css files into the rsuiteTable.js:
import fakeData from "./users.json";
import "rsuite-table/dist/css/rsuite-table.css";
Now create an export function which includes the following code snippet to defined the columns of the table along with their individual options:
export const Rsuittable = () => {
const [fakeDatum] = useState(fakeData);
return (
<Table data={fakeDatum} height={400}>
<Column width={100} align="center" fixed resizable>
<HeaderCell>ID</HeaderCell>
<Cell dataKey="id" />
</Column>
<Column width={150} align="center" fixed resizable>
<HeaderCell>First Name</HeaderCell>
<Cell dataKey="firstName" />
</Column>
<Column width={150} align="center" fixed resizable>
<HeaderCell>Last Name</HeaderCell>
<Cell dataKey="lastName" />
</Column>
<Column width={200} align="center" sortable fixed resizable>
<HeaderCell>City</HeaderCell>
<Cell dataKey="city" />
</Column>
<Column width={300} align="center" sortable={true} fixed resizable>
<HeaderCell>Street</HeaderCell>
<Cell dataKey="street" />
</Column>
<Column width={300} align="center" fixed resizable>
<HeaderCell>Company Name</HeaderCell>
<Cell dataKey="companyName" />
</Column>
<Column width={200} align="center" fixed resizable>
<HeaderCell>Email</HeaderCell>
<Cell dataKey="email" />
</Column>
<Column width={120} fixed="right">
<HeaderCell>Action</HeaderCell>
<Cell>
{(rowData) => {
function handleAction() {
alert(`id:${rowData.id}`);
}
return (
<span>
<a onClick={handleAction}>
{" "}
<b>Edit</b>{" "}
</a>{" "}
|
<a onClick={handleAction}>
{" "}
<b>Remove</b>{" "}
</a>
</span>
);
}}
</Cell>
</Column>
</Table>
);
};
Import Rsuittable.js component into the App.js file.
import { Rsuittable } from "./components/rsuitTable";
function App() {
return (
<div className="app">
<div className="containers">
<Rsuittable />
</div>
</div>
);
}
React-Table
React-Table is alight weight, fast, easy to customize and extendable data grid built for React applications. It is fully controllable via optional props and callbacks. Its 11,000+ stars on GitHub make it an excellent option for any React Application.
Advantages
•Simple design with easy customization
•Supports both client-side and server-side pagination
•Supports Pivoting and Aggregation
Disadvantages
•Minimal documentation
Install the corresponding packages via NPM:
npm install react-table
Create a component named reactTable.js and import the react-table module:
import { useTable } from "react-table";
Now create an export function named Reacttable:
export const Reacttable = () => {}
Insert the following code inside the above export function to define the columns of the table:
const columns = [
{
Header: "Name",
accessor: "name",
},
{
Header: "Age",
accessor: "age",
},
{
Header: "Email",
accessor: "email",
},
{
Header: "City",
accessor: "city",
},
];
Add the data to be displayed on the table:
const data = [
{
name: "Ayaan",
age: 26,
email:'ayaan@gmail.com',
city:'Colombo'
},
{
name: "Ahana",
age: 22,
email:'ahana@gmail.com',
city:'Kandy'
}
]
Use the useTable property from the react-table module as follows to define its behaviour:
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
} = useTable({
columns,
data,
});
Add the following code inside the return statement to return the table with its column, options, and data:
return (
<table {...getTableProps()}>
<thead>
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th {...column.getHeaderProps()}>{column.render("Header")}</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{rows.map((row, i) => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map((cell) => {
return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
})}
</tr>
);
})}
</tbody>
</table>
);
Import the Reacttable component into the App.js file.
import { Reacttable } from "./components/reactTable";
function App() {
return (
<div className="app">
<div className="containers">
<Reacttable />
</div>
</div>
);
}
Material-UI-datatables
Material-UI-data tables another Table library based on the Material UI design to build responsive data tables. It has three responsive modes “vertical”, “Standard” and “Simple” for mobile devices. It is well accepted with more than 1,500 stars on GitHub.
Advantages
•Provides custom components and styling
•Highly responsive for any device
•Simplify processes like filtering, view/hide columns, pagination, sorting
•Clear and detailed documentation
Disadvantages
•Does not support localization through external libraries
**Start by installing the material-ui/core and material-fonts libraries as mui-datatables requires them:
npm install @material-ui/core @material-ui/icon
Now install the mui-datatables package:
npm install mui-datatables
Create a component named muidataTable.js and import the mui-datatables package:
import MUIDataTable from "mui-datatables";
Now define the columns required for the table:
const columns = [
{
name: "name",
label: "Name",
options: {
filter: true,
sort: true,
},
},
{
name: "company",
label: "Company",
options: {
filter: true,
sort: false,
},
},
{
name: "city",
label: "City",
options: {
filter: true,
sort: false,
},
},
{
name: "state",
label: "State",
options: {
filter: true,
sort: false,
},
},
];
Next, insert some raw data to be displayed in the table:
const data = [
{
name: "Joe James",
company: "Test Corp",
city: "Yonkers",
state: "NY",
},
{
name: "John Walsh",
company: "Test Corp",
city: "Hartford",
state: "CT",
}
]
Make sure to enter the filter type in options as follows:
const options = {
filterType: "checkbox",
};
Bind the columns in a MUIDataTable tag in the return statement as follows:
return (
<MUIDataTable
title={"Employee List"}
data={data}
columns={columns}
options={options}
/>
);
Import the muidataTable component into the App.js file as follows:
import { Muitable } from "./components/muidataTable";
function App() {
return (
<div className="app">
<div className="container">
<Muitable />
</div>
</div>
);
}
Conclusion
Like any other React Library, the libraries in our list give developers a head start by allowing them to avoid the hassles of designing the behavior and styling of tables, which are commonly used in React and all types of applications.
Top comments (0)