Overview

Due to the widespread use of tables across third-party widgets like calendars and date pickers, we’ve designed our tables to be opt-in. Use <Table>, and extend with custom styles or our various included modifier classes.

Basic Table

Hoverable Rows

Add prop hover to enable a hover state on table rows within<tbody>.

Tables with Icons and Controls

Small Variants

All previous table styles are also available in a smaller variant, set prop size to sm

When using small variants of tables with icons and controls, don’t forget to use the smaller variants of those icons and controls too!

Basic Table with Sorting and other features

This example demonstrates the use of Table component with custom sorting and pagination. It also uses TablePagination component which is basically a wrapper over Pagination and designed to work with Tables.

DataTable

DataTable is a wrapper around Table component that accepts props data and columns for rendering rows and column headers. The prop columns is an array of column objects and each column object must have Header and accessor for rendering the table. Both data and columns should be memoized via React.useMemo.

Header accepts value of type 'String | Function | React.Component => JSX' and is used for rendering header text. The accessor takes a string value and it should be the same key used in data object. The accessor also supports deeply nested values, eg. 'info.name'. Refer to the examples below for how values for data and columns can be created.

DataTable component uses modus icons, refer to Getting Started page on how to enable them.

Table with Sorting

Use the prop sortBy on each column object to enable/disable sorting for individual columns. And by using disableSorting on the DataTable, sorting can be disabled for all the columns.

Table with Custom Sorting

The columns object provides an option for custom sorting. As shown in the example below, sortType which has a type String | Function(rowA: <Row>, rowB: <Row>, columnId: String, desc: Bool) takes a function to compare 2 rows of data and order them correctly. The function must be memoized and it should return 1 if rowA is larger, and -1 if rowB is larger.

Table with Scroll

Setting height and width on DataTable will enable vertical and horizontal scrolling.

Table with and without Client-side Pagination

Pagination is displayed by default, to disable it use the prop disablePagination .

Table with Columns Resizing

The prop resizeColumns on DataTable can be used to change column width. When hovering above the dividing line between two columns, there is a visual indicator that shows the column is adjustable. To disable resizing for a specific column use disableResizing inside the columns object as shown in the example.

Table with Single Row Selection

Row selection is enabled by default, to disable it use the prop disableRowSelection .

Table with Multiple Row Selection

Single row selection is the default, to enable multi-row selection use the prop multipleRowSelection. Clicking on a row selects it and clicking again undo the selection.

Table with CheckBox Row Selection

The prop checkBoxRowSelection on the DataTable component add checkbox on each row's first cell to control row selection.

Table with Custom CheckBox Row Selection

Row Selection Checkbox can be configured by using Header and Cell functions in the column object that is passed to DataTable.

Table with Sticky First Column

Use the prop stickyFirstColumn on DataTable component to make first column fixed.

Hiding Columns

Right clicking on a column header gives a context menu option to collapse/show columns. When a column is collapsed, a visual indicator with arrows is displayed and clicking on it will show the column.

Filter Columns

Use the field Filter on columns object to configure custom filter control on each column and use the prop FilterPanel to render it above the Table.

Global Search

Using the prop FilterPanel a global search control can be created.

Editable Cell

Each cell can be customized to render custom control through Cell prop inside columns object as shown below.

Column Reordering by Drag and Drop

Use the props allowDrag, allowDrop to left click and hold the column header to drag and drop the column in a new order. A visual indicator is shown between the header cells where the column will be dropped. If the drop operation is not allowed the line indicating the drop location will be red.

API

Table

import Table from `@trimbleinc/modus-react-bootstrap/Table`
NameTypeDefaultDescription
bordered
boolean

Adds borders on all sides of the table and cells.

borderless
boolean

Removes all borders on the table and cells, including table header.

hover
boolean

Enable a hover state on table rows within a <tbody>.

responsive
boolean | string

Responsive tables allow tables to be scrolled horizontally with ease. Across every breakpoint, use responsive for horizontally scrolling tables. Responsive tables are wrapped automatically in a div. Use responsive="sm", responsive="md", responsive="lg", or responsive="xl" as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.

size
string

Make tables more compact by cutting cell padding in half by setting size as sm.

striped
boolean

Adds zebra-striping to any table row within the <tbody>.

variant
string

Invert the colors of the table — with light text on dark backgrounds by setting variant as dark.

bsPrefix
string
'table'

DataTable

import DataTable from `@trimbleinc/modus-react-bootstrap/DataTable`
NameTypeDefaultDescription
ref
React.Ref<HTMLDivElement>

TablePagination

import TablePagination from `@trimbleinc/modus-react-bootstrap/TablePagination`
NameTypeDefaultDescription
count required
number

Total number of rows.

onPageChange required
function

Callback for Page change event.

function onPageChange(page: number) => void
 page - selected page index
onPageSizeChange required
function

Callback for Page size change event.

function onPageSizeChange(size: number) => void
 size - selected page size
pageIndex required
number

Current Page Index.

pageLimit
number
5

Number of visible page numbers.

pageSize required
number

Default Page Size.

pageSizeOptions required
array<>

An array of page size options.

size
'sm'|'lg'

Set's the size of all PageItems.

bsPrefix
string
'pagination'

DataTableColumn

NameTypeDescription
CellFunction | React.Component => JSXUsed for rendering custom table body cell content.
FilterFunction | React.Component => JSXThis function (or component) is used to render this column's filter UI. It receives the table and column instance objects as props.
Some of the props used for filter are: filterValue, preFilteredRows, setFilter, render
  • filterValue: The current filter value of the column.
  • preFilteredRows: The array of rows that were originally passed to this column's filter before filtering took place.
  • setFilter: Function to set the current filter value for the column.
  • render: Function that takes a string value ex: 'Header' to render the column header text.
Headerstring | Function | React.Component => JSXUsed for rendering column header content.
accessorstringThis is the unique ID for the column.
allowDragbooleanAllows dragging of the column. Used when drag and drop columns.
allowDropbooleanAllows dropping over the column. Used when drag and drop columns.
disableFiltersbooleanFiltering for the column will be disabled.
disableResizingbooleanDisables resizing for the column.
maxWidthnumberSpecifies the maximum width for the column.
minWidthnumberSpecifies the minimum width for the column.
sortBybooleanEnables sorting for the column.
sortDescFirstbooleanThe first sort direction for this column will be descending instead of ascending.
sortTypestring | Function(rowA: <Row>, rowB: <Row>, columnId: String, desc: Bool)String options are basic, datetime, alphanumeric. Default is alphanumeric. The resolved function from the this string/function will be used to sort the this column's data.
widthnumberSpecifies the width for the column.

DataTableColumnInstance

NameTypeDescription
canFilterbooleanDenotes whether a column is filterable.
canResizebooleanIndicates if the column can be resized.
canSortbooleanDenotes whether a column is sortable.
filterValueanyThe current filter value for the column.
filteredRowsArray<row>The resulting array of rows received from this column's filter after filtering took place.
isResizingbooleanIndicates if the column is currently being resized.
isSortedbooleanDenotes whether this column is currently being sorted.
isSortedDescbooleanDenotes whether the column's sort direction is descending or not.
preFilteredRowsArray<row>The array of rows that were originally passed to this column's filter before filtering took place.
sortedIndexnumberIf the column is currently sorted the index will be order of sorted columns. If not sorted the index will be -1.