DEV Community

Cover image for How to create a reusable table component with ReactJS in 2020
Ghazi Khan
Ghazi Khan

Posted on

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
create a reusable component with react and bootstrap

Read full article here

GitHub logo gkhan205 / react-reusable-table-component

Reusable Table component with ReactJS and Bootstrap #codewithghazi

Table Component

Usage:

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

Create a Table Constant which will be supplied to Table and data will be rendered automatically

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>;
      },
    },
  ];
};

Here tableConstants() is a javascript function which returns an array of objects or columns to be displayed on table. This function accepts parameters whatever you need to have in constant function to perform any additional task…

Top comments (1)

Collapse
 
ravalravi103 profile image
Ravi Raval

how to use this with typescript ??