How to create a reusable table component with ReactJS in 2020

If you want to learn how to create a reusable table component with react js and bootstrap to display data in a beautiful tabular format in your application with less code and higher reusability within just 10 mins then please read through this post and you will be a PRO in creating reusable table component in ReactJS.

Why we need a reusable table component?

After developing numerous applications in ReactJS, I have found a pattern of some components such as Table, Form Inputs, Buttons, Modals these are some types of components we need most of the time and writing it again and again to every component we have more number of lines which is almost duplicate and does almost the same thing only the data it reflects or action it performed are different.

So I created a playlist of Reusable form component with React on Youtube you can watch it here. Today I will be sharing table component with you guys which I have created in just 10 mins and saved my days of work in displaying tabular data in my applications.

Table component’s HTML is almost the same the only thing changes is the data we pass to the table, so why not make it reusable and save time in the future development of the application and this will help us keep code clean, tested, and maintainable.

Final Output

Read full article here

import Table from '/components/Table'
<Table data={data} cols={tableConstants(handleEdit)} isDark hoverable striped bordered={false} /&gt

import React from 'react';

export const tableConstants = (handleEdit) => {
  return [
    {
      title: 'ID',
      key: 'id',
      render: rowData => {
        return <span>{rowData.id}</span>;
      },
    },
    {
      title: 'Name',
      key: 'name',
      render: rowData => {
        return <span>{rowData.name}</span>;
      },
    },
    {
      title: 'Category',
      key: 'category',
      render: rowData => {
        return <span>{rowData.category}</span>;
      },
    },
    {
      title: 'Country',
      key: 'country',
      render: rowData => {
        return <span>{rowData.country}</span>;
      },
    },
    {
      title: 'Action',
      key: 'action',
      render: rowData => {
        return <button onClick={() => handleEdit}>Edit</button>;
      },
    },
  ];
};