Table

Tables are used for displaying columns and rows of data.

columns

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

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

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-04",
          expectedQuantity: "2,475 eaches",
          actualQuantity: "675 eaches",
          id: "r4"
        },
        {
          date: "2019-10-07",
          expectedQuantity: "2,475 eaches",
          actualQuantity: "1,575 eaches",
          id: "r5"
        }
      ]

[
        {
          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-04",
          expectedQuantity: "2,475 eaches",
          actualQuantity: "675 eaches",
          id: "r4"
        },
        {
          date: "2019-10-07",
          expectedQuantity: "2,475 eaches",
          actualQuantity: "1,575 eaches",
          id: "r5"
        }
      ]

noRowsContent

keyField

stickyHeader

expandedRows

onRowExpansionChange

rowsPerPage

onPageChange

rowHovers

compact

selectAllLabel

deselectAriaLabel

onRowMouseEnter

onRowMouseLeave

import * as React from "react";
import { Table } from "@nulogy/components";

export default () => {
  return (
    <Table
      columns={[
        { label: "Date", dataKey: "date" },
        {
          label: "Expected Quantity",
          dataKey: "expectedQuantity"
        },
        {
          label: "Actual Quantity",
          dataKey: "actualQuantity"
        }
      ]}
      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-04",
          expectedQuantity: "2,475 eaches",
          actualQuantity: "675 eaches",
          id: "r4"
        },
        {
          date: "2019-10-07",
          expectedQuantity: "2,475 eaches",
          actualQuantity: "1,575 eaches",
          id: "r5"
        }
      ]}
      stickyHeader={false}
    />
  );
}

import * as React from "react";
import { Table } from "@nulogy/components";

export default () => {
  return (
    <Table
      columns={[
        { label: "Date", dataKey: "date" },
        {
          label: "Expected Quantity",
          dataKey: "expectedQuantity"
        },
        {
          label: "Actual Quantity",
          dataKey: "actualQuantity"
        }
      ]}
      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-04",
          expectedQuantity: "2,475 eaches",
          actualQuantity: "675 eaches",
          id: "r4"
        },
        {
          date: "2019-10-07",
          expectedQuantity: "2,475 eaches",
          actualQuantity: "1,575 eaches",
          id: "r5"
        }
      ]}
      stickyHeader={false}
    />
  );
}

Variations

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.

ColumnWidths

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

Compact Styling

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

Footer

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

StickyHeader

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

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.

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.

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.

Filtering

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

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 in Storybook.

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).

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).

Props

Name	Type	Default	Description
columns	array		An array of column objects consisting of a label and dataKey and optionally, align and cellRenderer
rows	array		An array of row objects, where the key name matches the dataKey of the column
loading	boolean		A boolean that will show the table body in a loading state when set to true
noRowsContent	string	No records have been created for this table.	What to display when the table has no data
keyField	string	id	The name of the key to use as a unique identifier for individual rows
stickyHeader	boolean	false	Sets the table header to sticky. NOTE: the vertical position of the sticky header is aligned to the top of the Table. If there is padding on an element wrapping the Table you will see that the header is offset according to the top padding.
expandedRows	array	empty	An array of row id's that are expanded in the table
onRowExpansionChange	function	none	The function that should be called when a row is expanded or collapsed. The array of rows currently expanded is passed in as an argument.
rowsPerPage	number	none	The number of rows to display per page
onPageChange	function	none	The function that should be called when a current page changes. The page number that is currently selected is passed in as an argument.
rowHovers	boolean	true	Whether or not to show a light grey background on a row when hovering it
compact	boolean	false	Whether or not to display the table in compact mode
selectAllLabel	string		When hasSelectableRows is true, replaces the aria-label for the unchecked select all checkbox
deselectAriaLabel	string		When hasSelectableRows is true, replaces the aria-label for the checked select all checkbox
onRowMouseEnter	function		Event handler that is called whenever a mouse enters a row
onRowMouseLeave	function		Event handler that is called whenever a mouse leaves a row

Column Options

Name	Type	Default	Description
label	string		The label used in the header of the table column
dataKey	string	Required	Unique key for the column, used as the keys to define cell content for the column of each row
align	enum	left	sets the alignment of the text for the column in the default cell, 'left', 'right' or 'center'
cellFormatter	function		Used to format the table cells in the column. It should return a string or react component.
cellRenderer	function		Used to override the cell component in the column. No padding or other styles will be added in this case. It should return a react component.
headerFormatter	function		Used to format the column's header. It should return a string or react component.

Row Options

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

Name	Type	Description
id	string	Unique id for each row, required if another keyField is not passed to the Table
heading	string	Creates a heading out of the row that spans the full-width of the table
cellRenderer	function	Used to override the cell component in the row. No padding or other styles will be added in this case. It should return a react component.
expandAriaLabel	string	When hasExpandableRows is true, replaces the aria-label for the expand button
collapseAriaLabel	string	When hasExpandableRows is true, replaces the aria-label for the collapse button
selectAriaLabel	string	When hasSelectableRows is true, replaces the aria-label for the unchecked checkbox
deselectAriaLabel	string	When hasSelectableRows is true, replaces the aria-label for the checked checkbox

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.

Name	Type	Description
cellData	string	Text in the current cell, as passed in in the rows object
column	object	The column object the cell belongs to
row	object	The row object the cell belongs to

HeaderFormatter Argument Type

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

Name	Type	Default	Description
column	object		The column object the cell belongs to