React Material Table Component

A customizable & responsive Material Design table component for React projects with advanced features like multi-level data display, sorting, filtering, pagination, and row selection.

Try the live demo using this codesandbox link here

Installation

The easiest way to use material-table-component is to install it from npm and build it into your app with Webpack.

npm install @keyvalue/material-table-component

This package includes Material-UI as a dependency, so you don't need to install it separately. However, you'll need to install React since it isn't included in the package.

Usage

Material Table Component can be used in its basic form by providing the columns and data props:

import { GenericTable } from '@keyvalue/material-table-component';

<GenericTable
  columns={columns}
  data={data}
/>

The columns prop is an array of column definitions with the following structure:

const columns = [
  {
    key: "name",
    label: "Name",
  },
  {
    key: "age",
    label: "Age",
  }
];

The data prop should be an array of objects matching the column keys:

const data = [
  {
    id: "row-1",
    name: 'John Doe',
    age: 30,
    children: [] // Optional children for multi-level tables
  },
  {
    id: "row-2",
    name: 'Jane Smith',
    age: 25,
    children: []
  }
];

Multi-Level Table Example

The component supports multi-level data display with parent-child relationships:

<GenericTable
  data={[
    {
      id: "parent-1",
      investor: "Parent Company",
      grossInvestment: -1000000,
      children: [
        {
          id: "child-1",
          investor: "Subsidiary A",
          grossInvestment: -600000,
          children: []
        },
        {
          id: "child-2",
          investor: "Subsidiary B",
          grossInvestment: -400000,
          children: []
        }
      ]
    }
  ]}
  columns={[
    {
      key: "investor",
      label: "Investor",
    },
    {
      key: "grossInvestment",
      label: "Investment",
    }
  ]}
  meta={{
    chartType: "MULTI_LEVEL_TABLE",
    columns: [
      {
        id: "investor",
        name: "Investor",
        type: "string",
      },
      {
        id: "grossInvestment",
        name: "Investment",
        type: "currency",
        currencyFormat: {
          currency: "dollar",
          scale: 2,
        },
      }
    ]
  }}
/>

Props

Props that can be passed to the component are listed below:

Column Types and Formatting

The meta.columns property allows you to specify the type and formatting for each column:

meta={{
  chartType: "MULTI_LEVEL_TABLE",
  columns: [
    {
      id: "name",
      name: "Name",
      type: "string",
    },
    {
      id: "amount",
      name: "Amount",
      type: "currency",
      currencyFormat: {
        currency: "dollar",
        scale: 2,
      },
    },
    {
      id: "percentage",
      name: "Percentage",
      type: "percentage",
      scale: 2,
    },
    {
      id: "date",
      name: "Date",
      type: "date",
      dateFormat: "MM/DD/YYYY",
    }
  ]
}}

Supported column types include:

• string - Text data
• number - Numeric data
• currency - Monetary values with currency formatting
• percentage - Percentage values
• date - Date values with formatting options
• boolean - True/false values

Row Actions

You can define actions that appear for each row:

actions={[
  {
    label: "View Details",
    icon: "visibility",
    action: (rowId) => handleViewDetails(rowId),
    condition: (rowId) => hasDetails(rowId)
  },
  {
    label: "Edit",
    icon: "edit",
    action: (rowId) => handleEdit(rowId)
  }
]}

Style Customizations

You can customize the appearance of the table using the style props:

<GenericTable
  columns={columns}
  data={data}
  tableHeaderStyles={{
    background: "#1a237e",
    color: "#ffffff",
    fontSize: "1rem",
  }}
  tableCellStyles={{
    padding: "12px 16px",
  }}
  rowColors={["#f5f5f5", "#ffffff"]}
/>

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.