react-exp-table v2.0.5

react-exp-table

A react table component with expandable rows. This table uses consistent columns across all child rows and does not nest tables within rows.

Features

• Nested expandable rows
• Child row key mapping
• Conditional initial expand/collapse state by row
• Conditional row background colors
• Columns can include multiple entries per column
• All rows are loaded on initial load to ensure high performance when expanding/collapsing rows

Installation

npm i react-exp-table

Example

https://www.exptable.com/

Usage

import ExpandableTable from "react-exp-table";

function App() {
  const columns = [
    {
      title: "Location",
      key: "location"
    },
    {
      title: "Population",
      key: "population"
    },
    {
      title: "Party",
      key: "party"
    }
  ];

  const data = [
    {
      location: "Texas",
      population: "29 million",
      party: "Republican",
      child: [
        {
          location: "Houston",
          population: "2 million",
          party: "Democrat"
        },
        {
          location: "Austin",
          population: "1 million",
          party: "Democrat"
        }
      ]
    },
    {
      location: "California",
      population: "39 million",
      party: "Democrat",
      child: [
        {
          location: "Los Angeles",
          population: "4 million",
          party: "Democrat"
        },
        {
          location: "San Jose",
          population: "1 million",
          party: "Democrat"
        }
      ]
    }
  ];

  return <ExpandableTable columns={columns} data={data}></ExpandableTable>;
}

Result

Props

Column definition

export interface Column {
  title: string;
  key: string | string[];
  class?: string | string[];
}

Changelog

• 2.0.0 (30 Nov 2021) - Simplify column definition
• 1.0.0 (21 Nov 2021) - Initial release

Authors

• Chris Lapidas - Development

Questions

• clapidas@gmail.com

License

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