Table

Tables are used for displaying columns and rows of data.

DateExpected QuantityActual Quantity
2019-10-012,025 eaches1,800 eaches
2019-10-022,475 eaches2,250 eaches
2019-10-032,475 eaches1,425 eaches
2019-10-042,475 eaches675 eaches
2019-10-072,475 eaches1,575 eaches
2019-10-221,725 eaches-
2019-10-232,475 eaches-
2019-10-242,475 eaches-
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.

DateExpected QuantityActual Quantity
Tue Oct 01 20192,025 eaches1,800 eaches
Wed Oct 02 20192,475 eaches2,250 eaches
Thu Oct 03 20192,475 eaches1,425 eaches
Fri Oct 04 20192,475 eaches675 eaches
Mon Oct 07 20192,475 eaches1,575 eaches
Tue Oct 22 20191,725 eaches-
Wed Oct 23 20192,475 eaches-
Thu Oct 24 20192,475 eaches-
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).

DateExpected QuantityActual Quantity
2019-10-012,025 eaches1,800 eaches
2019-10-022,475 eaches2,250 eaches
2019-10-032,475 eaches1,425 eaches
2019-10-042,475 eaches675 eaches
2019-10-072,475 eaches1,575 eaches
2019-10-221,725 eaches-
2019-10-232,475 eaches-
2019-10-242,475 eaches-
<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.

DateExpected QuantityActual Quantity
2019-10-012,025 eaches1,800 eaches
2019-10-022,475 eaches2,250 eaches
2019-10-032,475 eaches1,425 eaches
2019-10-042,475 eaches675 eaches
2019-10-072,475 eaches1,575 eaches
2019-10-221,725 eaches-
2019-10-232,475 eaches-
2019-10-242,475 eaches-
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.

DateExpected QuantityActual Quantity
Loading...
<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.

DateExpected QuantityActual Quantity
2019-10-012,025 eaches1,800 eaches
2019-10-022,475 eaches2,250 eaches
2019-10-032,475 eaches1,425 eaches
2019-10-042,475 eaches675 eaches
2019-10-072,475 eaches1,575 eaches
2019-10-221,725 eaches-
2019-10-232,475 eaches-
2019-10-242,475 eaches-
<Table columns={columns} rows={rows} compact />

Footer

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

DateExpected QuantityActual Quantity
2019-10-012,025 eaches1,800 eaches
2019-10-022,475 eaches2,250 eaches
2019-10-032,475 eaches1,425 eaches
2019-10-042,475 eaches675 eaches
2019-10-072,475 eaches1,575 eaches
2019-10-221,725 eaches-
2019-10-232,475 eaches-
2019-10-242,475 eaches-
Total18,000 eaches7,725 eaches
Attainment41.5%
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.

DateExpected QuantityActual Quantity
2019-10-012,025 eaches1,800 eaches
2019-10-022,475 eaches2,250 eaches
2019-10-032,475 eaches1,425 eaches
<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).

DateExpected QuantityActual Quantity
2019-10-012,025 eaches1,800 eaches
2019-10-022,475 eaches2,250 eaches
2019-10-032,475 eaches1,425 eaches
2019-10-042,475 eaches675 eaches
2019-10-072,475 eaches1,575 eaches
2019-10-221,725 eaches-
2019-10-232,475 eaches-
2019-10-242,475 eaches-
<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

NameTypeDefaultDescription

columns

array

Required

An array of column objects consisting of a label and dataKey and optionally, align and cellRenderer

rows

array

Required

An array of row objects, where the key name matches the dataKey of the column

loading

boolean

false

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

hasSelectableRows

boolean

false

Displays a column of checkboxes allowing the user to select rows in the table

selectedRows

array

empty

An array of row id's that are marked as selected in the table

onRowSelectionChange

function

none

The function that should be called when a row selection changes. The array of rows currently selected is passed in as an argument.

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

Column Type

NameTypeDefaultDescription

label

string

Required

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

string enum ('left', 'right' or 'center')

left

sets the alignment of the text for the column in the default cell

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

NameTypeDefaultDescription

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.

NameTypeDefaultDescription

cellData

string

Text in the current cell, as passed in in the rows object

column

column

The column object the cell belongs to

row

row

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.

NameTypeDefaultDescription

column

column

The current column object