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

The DataTable component is a wrapper of Table component with more features that can be turned on/off anytime through the API.
DataTable requires two props: columns which takes an array of header data and data prop which takes an array of row data. The row data should match the header information passed to columns prop. The objects passed in the array to the column prop has a required key accessor which is the column identifier and and the Header key is used to set the column label, eg.[{ Header: 'First Name', accessor: 'firstName' }].
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 in the columns object. Sorting can be disabled for the whole DataTable using the prop disableSorting.

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 enable resizing on all the columns. To disable resizing for each 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
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.

checkBoxRowSelection
boolean

Enables checkbox to select the rows.

columns required
array<>

An array of column data of type DataTableColumn for the Table Headers.

data required
array<>

An array of data for the Table Rows.

disableDragging
boolean

Disables dragging function on Table headers.

disableFiltering
boolean

Removes filter panel.

disablePagination
boolean

Displays all the rows and hides pagination panel.

disableRowSelectionOnClick
boolean

Disables on-click row selection.

disableSorting
boolean

Removes sorting icons from the column header.

dragTemplate
function

Function that returns a template for Dragging item.

function dragTemplate(column: DataTableColumnInstance<T>) => React.ReactElement
 column - An instance of the column object that is dragged
filterPanel
function

Function that returns a custom filter panel.

function filterPanel(columns: DataTableColumnInstance<T>[], filters: Filters<T>, resetFilter: (columnId: string) => void,
           resetAllFilters: () => void, globalFilter: any, setGlobalFilter: (filterValue: FilterValue) => void
           ) => React.ReactElement
params:
 columns - An array of filter columns, refer `DataTableColumnInstance`
 activeFilters - An array of active filters
 resetFilter - Function to reset a column's filter
 resetAllFilters - Function to reset all the filters
 globalFilter - Global filter value
 setGlobalFilter - Function to set the global filter value
hover
boolean

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

id required
string

A HTML id attribute, necessary for proper form accessibility.

multipleRowSelection
boolean

Enables multiple row selection.

onRowSelectionChange
function

Callback when rows selected or unselected.

function onRowSelectionChange (rows: any[]) => void
pageSize
number

Default page size if pagination is enabled.

pageSizeOptions
arrayOf

An array of page size options if pagination is enabled.

ref
React.Ref<HTMLDivElement>
resizeColumns
boolean

Enables column resizing.

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.

stickyFirstColumn
boolean

Pins the first column.

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.

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.