4.1.16

Deprecated

Simple Table

Simple Table is a table component that groups content that is similar or related, such as terms and definitions in a grid-like format across rows and columns. They organise information in way that's easy to scan, so that users can look for patterns and insights.

SimpleTable has been deprecated

Superseded by the Table components which enables dynamic features like sorting, filtering and many more...

Installation

bash

npm install @nib/table

Usage

There are two ways to use the SimpleTable component. The first is using the named component (<SimpleTable />) and the second is by explicitly defining the table subcomponents.

Method 1: Requires the columns and data props.

jsx

import {SimpleTable} from '@nib/table';
import {createColumnHelper} from '@tanstack/react-table';

const ExampleTable = () => {
  const columnHelper = createColumnHelper<ColumnHeader>();

  const tableColumns = [
    columnHelper.accessor('column1', {
      cell: info => info.getValue(),
      footer: info => info.column.id
    }),
    columnHelper.accessor('column2', {
      cell: info => info.getValue(),
      footer: info => info.column.id
    }),
    columnHelper.accessor('column3', {
      cell: info => info.getValue(),
      footer: info => info.column.id
    })
  ];

  const tableData = [
    {
      column1: 'Sample data',
      column2: 'Sample data',
      column3: 'Sample data'
    },
    {
      column1: 'Sample data',
      column2: 'Sample data that is longer than the others',
      column3: 'Sample data'
    },
    {
      column1: 'Sample data',
      column2: 'Sample data',
      column3: 'Sample data'
    },
    {
      column1: 'Sample data',
      column2: 'Sample data',
      column3: 'Sample data'
    }
  ];

  return <SimpleTable columns={tableColumns} data={tableData} caption="Caption" captionSide="top" rowHeight="relaxed" stripedRows equalColumns fixedHeader fixedColumn />;
};

Method 2: Explicitly define the table data and component structure.

jsx

import {TableWrapper, Table, TableHead, TableHeadRow, TableHeading, TableBody, TableRow, TableData} from '@nib/table';

const ExampleTable = () => (
  <TableWrapper>
    <Table fixedColumn equalColumns>
      <TableCaption captionSide="top">Caption</TableCaption>
      <TableHead>
        <TableHeadRow fixedHeader>
          <TableHeading>Column 1</TableHeading>
          <TableHeading collapseColumn>Column 2</TableHeading>
          <TableHeading textAlign="right">Column 3</TableHeading>
        </TableHeadRow>
      </TableHead>
      <TableBody stripedRows>
        <TableRow rowHeight="relaxed">
          <TableData>Sample data</TableData>
          <TableData collapseColumn>Sample data</TableData>
          <TableData textAlign="right">Sample data</TableData>
        </TableRow>
        <TableRow>
          <TableData>Sample data</TableData>
          <TableData collapseColumn>Sample data</TableData>
          <TableData textAlign="right">Sample data</TableData>
        </TableRow>
        <TableRow rowHeight="relaxed">
          <TableData>Sample data</TableData>
          <TableData collapseColumn>Sample data</TableData>
          <TableData textAlign="right">Sample data</TableData>
        </TableRow>
        <TableRow rowHeight="relaxed">
          <TableData>Sample data</TableData>
          <TableData collapseColumn>Sample data</TableData>
          <TableData textAlign="right">Sample data</TableData>
        </TableRow>
      </TableBody>
    </Table>
  </TableWrapper>
);

Interactive demo

jsx

() => {
  const tableData = [
    {
      column1: 'Column 1',
      column2: 'Column 2',
      column3: 'Column 3',
      column4: 'Column 4',
      column5: 'Column 5',
      column6: 'Column 6'
    },
    {
      column1: 'Column 1',
      column2: 'Column 2',
      column3: 'Column 3',
      column4: 'Column 4',
      column5: 'Column 5',
      column6: 'Column 6'
    },
    {
      column1: 'Lorem Ipsum is simply dummy text ',
      column2: 'Column 2',
      column3: 'Column 3',
      column4: 'Column 4',
      column5: 'Column 5',
      column6: 'Column 6'
    },
    {
      column1: 'Column 1',
      column2: 'Column 2',
      column3: 'Column 3',
      column4: 'Column 4',
      column5: 'Column 5',
      column6: 'Column 6'
    },
    {
      column1: 'Column 1',
      column2: 'Column 2',
      column3: 'Column 3',
      column4: 'Column 4',
      column5: 'Column 5',
      column6: 'Column 6'
    }
  ];

  const columnHelper = createColumnHelper();

  const columns = [
    columnHelper.accessor('column1', {
      cell: info => info.getValue(),
      footer: info => info.column.id
    }),
    columnHelper.accessor('column2', {
      cell: info => info.getValue(),
      footer: info => info.column.id
    }),
    columnHelper.accessor('column3', {
      cell: info => info.getValue(),
      footer: info => info.column.id
    }),
    columnHelper.accessor('column4', {
      cell: info => info.getValue(),
      footer: info => info.column.id
    }),
    columnHelper.accessor('column5', {
      cell: info => info.getValue(),
      footer: info => info.column.id
    }),
    columnHelper.accessor('column6', {
      cell: info => info.getValue(),
      footer: info => info.column.id
    })
  ];
  return <SimpleTable
      columns={columns}
      data={tableData}
      caption={'Simple Table'}
      captionSide={'top'}
      height={''}
      maxHeight={''}
      rowHeight={'regular'}
      stripedRows={true}
      rowHover={false}
      fixedHeader={false}
      fixedColumn={false}
      equalColumns={false}
    />
};

() => {
  const tableData = [
    {
      column1: 'Column 1',
      column2: 'Column 2',
      column3: 'Column 3',
      column4: 'Column 4',
      column5: 'Column 5',
      column6: 'Column 6'
    },
    {
      column1: 'Column 1',
      column2: 'Column 2',
      column3: 'Column 3',
      column4: 'Column 4',
      column5: 'Column 5',
      column6: 'Column 6'
    },
    {
      column1: 'Lorem Ipsum is simply dummy text ',
      column2: 'Column 2',
      column3: 'Column 3',
      column4: 'Column 4',
      column5: 'Column 5',
      column6: 'Column 6'
    },
    {
      column1: 'Column 1',
      column2: 'Column 2',
      column3: 'Column 3',
      column4: 'Column 4',
      column5: 'Column 5',
      column6: 'Column 6'
    },
    {
      column1: 'Column 1',
      column2: 'Column 2',
      column3: 'Column 3',
      column4: 'Column 4',
      column5: 'Column 5',
      column6: 'Column 6'
    }
  ];

  const columnHelper = createColumnHelper();

  const columns = [
    columnHelper.accessor('column1', {
      cell: info => info.getValue(),
      footer: info => info.column.id
    }),
    columnHelper.accessor('column2', {
      cell: info => info.getValue(),
      footer: info => info.column.id
    }),
    columnHelper.accessor('column3', {
      cell: info => info.getValue(),
      footer: info => info.column.id
    }),
    columnHelper.accessor('column4', {
      cell: info => info.getValue(),
      footer: info => info.column.id
    }),
    columnHelper.accessor('column5', {
      cell: info => info.getValue(),
      footer: info => info.column.id
    }),
    columnHelper.accessor('column6', {
      cell: info => info.getValue(),
      footer: info => info.column.id
    })
  ];
  return <SimpleTable
      columns={columns}
      data={tableData}
      caption={'Simple Table'}
      captionSide={'top'}
      height={''}
      maxHeight={''}
      rowHeight={'regular'}
      stripedRows={true}
      rowHover={false}
      fixedHeader={false}
      fixedColumn={false}
      equalColumns={false}
    />
};

Props

As we have built this package on react-table, we rely on their implementation of the columns and data props to populate the table.

Prop	Type	Default	Description
`columns` (required)	memoized array		The column data. Is a `memoized array` (using the `useMemo` React hook). Must be in the structure shown in the Usage above.
`data` (required)	memoized array		The table data. Is a `memoized array` (using the `useMemo` React hook). Must be in the structure shown in the Usage above.
`caption`	string		The `<caption>` of the table.
`captionSide`	string		How the table caption is positioned. Must be one of `'top'` or `'bottom'`.
`height`	string		The `height` of the table. Must be a valid CSS height value.
`maxHeight`	string		The `max-height` of the table. Must be a valid CSS max-height value.
`rowHeight`	string		The height of the table rows. Must be one of `'relaxed'`, `'regular'`, `'condensed'`.
`stripedRows`	boolean	`false`	Whether to apply alternate colours to the table rows.
`equalColumns`	boolean	`false`	Whether to set the width of the columns equal.
`fixedHeader`	boolean	`false`	Whether to fix the header to the top of the table when vertically scrolling.
`fixedColumn`	boolean	`false`	Whether to fix the first column to the left of the table when horizontally scrolling.

Considerations

Organised and intuitive

Structured tables should organize content in a meaningful way, such as using hierarchy or alphabetisation and a logical structure that makes content easy to understand.

Typography and alignment

Headers should be set in Title case, while all other text is set in sentence case. All typography is default left aligned. This helps make the data easily scannable, readable and comparable. The one exception is numeric data which should be right aligned to help users identify number size.

Content

Using concise text, scanable and objective language increases usabilty and readability. Consider using only 45 to 75 characters (including spaces and punctuation) per line.

Visual cues

Use different colored backgrounds to add organisational context and meaning to your table. Whether a header or alternating background of rows. These visual cues help present the data in a way that is easier to scan and understand.

The stripedRows prop can help achieve this and is recommended for larger sets where the alternating pattern will be clear and prevent confusion when reading along the horizontally axis of the table.

Column widths

When representing information that is similar, consider using even column widths to make it easy for users to make a comparison. This means using the equalColumns prop.

At times, content might need to be structured to fit disproportionately allowing for flexibility of headers and corresponding columns to be changed based on content length. The number of characters for readability per line should not go beyond 45 to 75 characters (including spaces and punctuation) per line.

In tables that use uneven column widths, ensure that the collapseColumn prop is not applied to the last column in the table.

Row heights

When choosing row heights, be sure to consider the type and amount of data in your table. Regular and relaxed row heights offer more white space, and are more comfortable for reading large datasets. Using a condensed row height will allow the user to view more data at once without having to scroll, but will reduce the table's ereadability and potentially cause parsing errors.

In summary:

Use relaxed row heights when you have heavy content or less than 25 rows.
Use regular row heights (default) when you only have a couple of words per column and need to create easier scanability between information and data.
Use condensed row heights when space is limited or for more numerical datasets.

Maintaining context while scrolling

Anchor contextual information to help users understand what data they're looking at while scrolling down or across a table. This functionality is important when designing tables with large datasets or on smaller screens.

The two props that will assist in this design are fixedHeader and fixedColumn.

Responsive design

Along with maintaining context while scrolling, the number of columns that fit on a mobile screen without scrolling is important for responsive design. Items need to be legible without requiring the user to zoom in. For complex or wordy entries, such as those in comparison tables, only 2 columns may fit legibly on a narrow mobile screen. For a number-heavy table, narrower columns may work, allowing more columns to be visible.

To make certain column widths smaller, consider using the collapse option in the columns prop array.

Table

Edit this page