react-virtualized-collapsible

Collapsible List/Table made using react-virtualized.

Demo

You can check out the demo here.

Install

npm install --save react-virtualized-collapsible

Usage

import * as React from 'react';

import { CollapsibleTable } from 'react-virtualized-collapsible';

const data = [
  {
    file: 'Est duis in cillum adipisicing nisi.',
    summary: 'Laborum amet dolore dolor tempor pariatur ad enim. ',
    description: 'Exercitation deserunt consectetur occaecat eu tempor nulla anim dolore irure. '
  },
  {
    file: 'Laboris amet adipisicing laborum dolore.',
    summary: 'Aliquip voluptate exercitation velit fugiat. ',
    description: 'Fugiat ipsum eiusmod ad commodo minim et officia magna consequat sint quis.'
  },
  ...
];

const columns = [
  { dataKey: 'file', label: 'File', flexGrow: 1, width: 100 },
  { dataKey: 'summary', label: 'Summary', flexGrow: 1, width: 200 }
];

const _getTableRowHeight = ({ index, expanded }) => {
  return expanded ? 131 : 41;
};

const _tablePanelRenderer = ({ key, columns }) => {
  return (
    <div key={key} className="custom-table-row-header">
      {columns}
    </div>
  );
};

const _tableExtraContentRenderer = ({ key, rowData }) => {
  return (
    <div key={key} className="custom-table-row-content">
      {rowData.description}
    </div>
  );
};

export default function App(props) {
  return (
    <CollapsibleTable
      height={350}
      data={data}
      rowClassName="custom-table-row"
      columns={columns}
      rowHeight={_getTableRowHeight}
      rowRenderer={_tablePanelRenderer}
      extraContentRenderer={_tableExtraContentRenderer}
    />
  );
}

License

MIT © halftonepixel