gkhan205 / react-reusable-table-component Goto Github PK

import Table from '/components/Table';

<Table data={data} cols={tableConstants(handleEdit)} isDark hoverable striped bordered={false} />

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

{
  title: 'ID',
  key: 'id',
  render: rowData => {
    return <span>{rowData.id}</span>;
  },
}

Eg: You have a nested JSON data as below
{
  name: 'Test',
  category: {
    name: 'Cateogory Name',
    subCategory: {
      name: 'Sub Category Name
    }
  }
}

and you have to show Sub Category name to any column you will have to refer it constant item as below:

{
  title: 'Sub Category',
  key: 'sub-category',
  render: rowData => {
    return <span>{rowData.category.subCategory.name}</span>;
  },
}

In this way you will not have to re-format the data everytime you send to table