Table

import {Table} from "@nulogy/components";

const columns = [
  { label: "Date", dataKey: "date" },
  { label: "Expected Quantity", dataKey: "expectedQuantity" },
  { label: "Actual Quantity", dataKey: "actualQuantity" }
];

const rows = [
  {
    date: "2019-10-01",
    expectedQuantity: "2,025 eaches",
    actualQuantity: "1,800 eaches",
    id: "r1"
  },
  {
    date: "2019-10-02",
    expectedQuantity: "2,475 eaches",
    actualQuantity: "2,250 eaches",
    id: "r2"
  },
  {
    date: "2019-10-03",
    expectedQuantity: "2,475 eaches",
    actualQuantity: "1,425 eaches",
    id: "r3"
  },
  ...
  {
    date: "2019-10-24",
    expectedQuantity: "2,475 eaches",
    actualQuantity: "-",
    id: "r8"
  }
];

<Table columns={columns} rows={rows} keyField="date"/>

Customizing cell display

A custom component can be implemented using a CellFormatter (to maintain the existing cell styles) or CellRenderer (for completely custom styles).

Similarly headers can be customized using the HeaderFormatter function props. See Storybook for other examples of implementing different custom components.

const customCellRenderer = ({cellData}) => (
    <IconicButton icon="delete">{cellData}</IconicButton>
);
const dateToString = ({cellData}) => {
  return new Date(cellData).toDateString();
};

const customHeaderFormatter = ({ label }) => (
  <>
    <IconicButton icon="delete">{label}</IconicButton>
  </>
);

const columnsWithCustomCells = [
  { label: "Date", dataKey: "date", cellFormatter: dateToString },
  { label: "Expected Quantity", dataKey: "expectedQuantity",},
  { label: "Actual Quantity", dataKey: "actualQuantity",},
  {
    label: "Remove all",
    dataKey: "actions",
    headerFormatter: customHeaderFormatter,
    cellRenderer: customCellRenderer
  }
];

<Table columns={columnsWithCustomCells} rows={rows} />

Selectable rows

Setting hasSelectableRows on the Table will add a column of checkboxes to the table so that rows can be selected by the user. Using the checkbox in the head of the table will toggle the selection of all rows.

A keyField should be specified to provide unique ids for rows (by default the keyField will be "id" and expect a property of id in the row objects).

<Table
  columns={columns}
  rows={rows}
  keyField="date"
  HasSelectableRows
  onRowSelectionChange={selectedRows => selectedRows}
/>

Column widths

A width for a column can be set (as actual size or percentage) inside the column data.

const columnsWithWidths = [
  { label: "Date", dataKey: "date", width: "40%" },
  { label: "Expected Quantity", dataKey: "expectedQuantity" },
  { label: "Actual Quantity", dataKey: "actualQuantity" }
];

<Table columns={columnsWithWidths} rows={rows} />

Loading state

The table can be set to loading while row data is being fetched. It will show rows when the loading prop is set to false.

<Table loading columns={columns} rows={rows} />

Compact Styling

The table can be set to use compact styling which decreases the paddings when the compact prop is set to true.

<Table columns={columns} rows={rows} compact />

Sticky Header

The table header can remain fixed to the top of the table when scrolling by setting the prop stickyHeader to true.

<Table columns={columns} rows={rows} stickyHeader />

Footer

A footer can be added to the table by adding an array of rows to the footerRows prop.

import {Table} from "@nulogy/table";

const footerRows = [
  { date: "Total", expectedQuantity: "18,000 eaches", actualQuantity: "7,725 eaches" },
  { date: "Attainment", expectedQuantity: "", actualQuantity: "	41.5%" }
];

<Table columns={columns} rows={rows} footerRows={footerRows} />

Pagination

Setting rowsPerPage on the Table will add a Pagination component to the table. A maximum of the specified rowsPerPage will be shown on each page.

Providing a function to onPageChange will allow tracking of the current page number. It is fired whenever the page changes and takes in the current page number as an argument.

<Table
  columns={columns}
  rows={rows}
  rowsPerPage={3}
  onPageChange={pageNum => pageNum}
/>

Headings

Headings that span the full width of a row can be added within the table's rows. To add a heading add a row with a key of heading The appearance of the heading can be customized by adding a cellRenderer to the row. See an example in Storybook.

Expandable rows

Setting hasExpandableRows and providing expandedContent on a row will add a button that can be used to expand and collapse content.expandedContent should return a React node that should be rendered when the row is expanded.

A keyField should be specified to provide unique ids for rows (by default the keyField will be "id" and expect a property of id in the row objects).

<Table
  columns={columns}
  rows={rowDataWithExpandedContent}
  hasExpandableRows
  onRowExpansionChange={() => {}}
/>

Server-side or custom pagination

The Pagination and Table components can also be used together to support server-side pagination or other custom behaviour. An example of such an implementation can be found in Storybook.

Filtering

Filtering can be implemented by passing filtered rows to the rows prop of the table. See an example of filtering inStorybook.

Sorting

Sorting can be implemented using the headerFormatter to pass a SortingHeader component or another custom header to the column that should be sortable. See an example of the complete implementation with table inStorybook.

Props

Column Type

Row Type

Rows should have keys corresponding to the dataKeys provided in the columns. In addition, there are a few extra keys used by the table that can be provided to each row

CellRenderer / CellFormatter Argument Type

Use CellFormatter to maintain the styles within the cell while providing a custom component or string. Use CellRenderer when using completely custom styles.

HeaderFormatter Argument Type

Use HeaderFormatter to provide a custom header component. Styles on the header cell will be maintained.

Resources

• View in Storybook