Data table - Intelligence Community Design System

Show navigation section

Component demo

Interactive example

Web component

React

Show full code

<ic-data-tablecaption="Basic Table"></ic-data-table>

<IcDataTablecaption="Basic"columns={columns}data={data}/>

Data table details

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name	Description	Default
Property caption Attribute caption	The title for the table only visible to screen readers. Required type: string
Property columns	The column headers for the table. Required type: IcDataTableColumnObject[] - { key: string; title: string; dataType: IcDataTableColumnDataTypes; columnAlignment?: IcDataTableAlignmentOptions; columnWidth?: string \| IcDataTableColumnWidthTypes; textWrap?: boolean; cellAlignment?: string; emphasis?: string; colspan?: number; icon?: { icon: string; onAllCells?: boolean; hideOnHeader?: boolean; }; excludeColumnFromSort?: boolean; hidden?: boolean; disableAutoSort?: boolean; }
Property columnHeaderTruncation Attribute column-header-truncation	Determines whether the column header should be truncated and display a tooltip. Default is`false` . type: boolean	false
Property data	The row content for the table. type: IcDataTableDataType[] - IcDataTableDataType[] \| undefined
Property density Attribute density	Set the density of the table including font and padding. type: IcDataTableDensityOptions - "default" \| "dense" \| "spacious"	"default"
Property disableAutoSort Attribute disable-auto-sort	If`true` , the built in sort functionality will be disabled. For example, if rows will already be sorted from an external source. type: boolean - boolean \| undefined	false
Property embedded Attribute embedded	Applies a border to the table container. type: boolean	false
Property globalRowHeight Attribute global-row-height	Sets the row height on all rows in the table that aren't set using the`variableRowHeight` method. type: IcDataTableRowHeights - "auto" \| number	"auto"
Property height Attribute height	Sets the table height. Can be set to`auto` or a specific value in`px` ,`rem` , or`%` . type: string - string \| undefined
Property hideColumnHeaders Attribute hide-column-headers	If`true` , column headers will not be visible. type: boolean - boolean \| undefined	false
Property loading Attribute loading	When set to`true` , the full table will show a loading state, featuring a radial indicator. type: boolean	false
Property loadingOptions	Sets the props for the circular loading indicator used in the loading state. type: { description?: string; label?: string; labelDuration?: number; max?: number; min?: number; progress?: number; monochrome?: boolean; overlay?: boolean; } - undefined \| { description?: string \| undefined; label?: string \| undefined; labelDuration?: number \| undefined; max?: number \| undefined; min?: number \| undefined; progress?: number \| undefined; monochrome?: boolean \| undefined; overlay?: boolean \| undefined; }
Property maxWidth Attribute max-width	Sets the maximum width of the data table. Can be set in`px` ,`rem` , or`%` . type: string - string \| undefined
Property minWidth Attribute min-width	Sets the minimum width of the data table. Can be set in`px` ,`rem` , or`%` . type: string - string \| undefined
Property minimumLoadingDisplayDuration Attribute minimum-loading-display-duration	The minimum amount of time the`loading` state displays for before showing the data. Used to prevent flashing in the component. type: number	1000
Property paginationBarOptions	Sets the props for the built-in pagination bar. If the`pagination-bar` slot is used then this prop is ignored. type: IcPaginationBarOptions - export interface IcPaginationBarOptions { alignment?: IcPaginationAlignmentOptions; hideAllFromItemsPerPage?: boolean; hideCurrentPage?: boolean; hideFirstAndLastPageButton?: boolean; hideRangeLabel?: boolean; itemLabel?: string; itemsPerPageOptions?: { label: string; value: string }[]; monochrome?: boolean; pageLabel?: string; rangeLabelType?: IcPaginationLabelTypes; selectedItemsPerPage?: number; selectItemsPerPageOnEnter?: boolean; setToFirstPageOnPaginationChange?: boolean; showGoToPageControl?: boolean; showItemsPerPageControl?: boolean; theme?: IcThemeMode; type?: IcPaginationTypes; }	{ alignment: "right", hideAllFromItemsPerPage: false, hideCurrentPage: false, hideFirstAndLastPageButton: false, hideRangeLabel: false, itemLabel: "Item", itemsPerPageOptions: [ { label: "10", value: "10" }, { label: "25", value: "25" }, { label: "50", value: "50" }, ], monochrome: false, pageLabel: "Page", rangeLabelType: "page", selectedItemsPerPage: 10, selectItemsPerPageOnEnter: true, setToFirstPageOnPaginationChange: false, showGoToPageControl: true, showItemsPerPageControl: true, type: "simple", }
Property rowSelection Attribute row-selection	If`true` , a checkbox column will be displayed to the left of the table which allows multiple rows to be selected. type: boolean	false
Property showPagination Attribute show-pagination	If`true` , adds a pagination bar to the bottom of the table. type: boolean - boolean \| undefined	false
Property sortOptions	Sets the order columns will be sorted in and allows for 'default' sorts to be added. type: { sortOrders: IcDataTableSortOrderOptions[]; defaultColumn?: string; } - { sortOrders: IcDataTableSortOrderOptions[]; defaultColumn?: string \| undefined; }	{ sortOrders: ["unsorted", "ascending", "descending"], defaultColumn: "", }
Property sortable Attribute sortable	If`true` , allows table columns to be sorted using applied sort buttons. type: boolean - boolean \| undefined	false
Property stickyColumnHeaders Attribute sticky-column-headers	If`true` , column headers will remain at the top of the table when scrolling vertically. type: boolean	false
Property stickyRowHeaders Attribute sticky-row-headers	If`true` , row headers will remain to the left when scrolling horizontally. type: boolean	false
Property tableLayout Attribute table-layout	Sets the layout of the table type: "fixed" \| "auto" - "auto" \| "fixed" \| undefined	"fixed"
Property theme Attribute theme	Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component. type: IcThemeMode - "dark" \| "inherit" \| "light" \| undefined	"inherit"
Property truncationPattern Attribute truncation-pattern	Sets the method used to truncate long text in cells where textWrap is`false` . The`tooltip` truncation pattern allows the overflowing text to be seen in a tooltip. The`show-hide` truncation pattern allows the overflowing text to be shown and hidden using the ic-typography "See more"/"See less" buttons. type: IcDataTableTruncationTypes - "show-hide" \| "tooltip" \| undefined
Property updating Attribute updating	If`true` , the table displays a linear loading indicator below the header row to indicate an updating state. type: boolean	false
Property updatingOptions	Sets the props for the linear loading indicator used in the updating state. type: { description?: string; max?: number; min?: number; progress?: number; monochrome?: boolean; } - undefined \| { description?: string \| undefined; max?: number \| undefined; min?: number \| undefined; progress?: number \| undefined; monochrome?: boolean \| undefined; }
Property variableRowHeight	Allows for custom setting of row heights on individual rows based on an individual value from the`data` prop and the row index. If the function returns`null` , that row's height will be set to the`globalRowHeight` property. type: (params: { [key: string]: any; index: number; }) => IcDataTableRowHeights \| null - ((params: { [key: string]: any; index: number; }) => IcDataTableRowHeights \| null) \| undefined
Property width Attribute width	Sets the table width. Can be set to`auto` or a specific value in`px` ,`rem` , or`%` . type: string - string \| undefined

Property

caption

Attribute

caption

The title for the table only visible to screen readers.

Required

type: string

Property

columns

The column headers for the table.

Required

type: IcDataTableColumnObject[] - { key: string; title: string; dataType: IcDataTableColumnDataTypes; columnAlignment?: IcDataTableAlignmentOptions; columnWidth?: string | IcDataTableColumnWidthTypes; textWrap?: boolean; cellAlignment?: string; emphasis?: string; colspan?: number; icon?: { icon: string; onAllCells?: boolean; hideOnHeader?: boolean; }; excludeColumnFromSort?: boolean; hidden?: boolean; disableAutoSort?: boolean; }

Property

columnHeaderTruncation

Attribute

column-header-truncation

Determines whether the column header should be truncated and display a tooltip. Default isfalse .

type: boolean

Default: false

Property

data

The row content for the table.

type: IcDataTableDataType[] - IcDataTableDataType[] | undefined

Property

density

Attribute

density

Set the density of the table including font and padding.

type: IcDataTableDensityOptions - "default" | "dense" | "spacious"

Default: "default"

Property

disableAutoSort

Attribute

disable-auto-sort

Iftrue , the built in sort functionality will be disabled. For example, if rows will already be sorted from an external source.

type: boolean - boolean | undefined

Default: false

Property

embedded

Attribute

embedded

Applies a border to the table container.

type: boolean

Default: false

Property

globalRowHeight

Attribute

global-row-height

Sets the row height on all rows in the table that aren't set using thevariableRowHeight method.

type: IcDataTableRowHeights - "auto" | number

Default: "auto"

Property

height

Attribute

height

Sets the table height. Can be set toauto or a specific value inpx ,rem , or% .

type: string - string | undefined

Property

hideColumnHeaders

Attribute

hide-column-headers

Iftrue , column headers will not be visible.

type: boolean - boolean | undefined

Default: false

Property

Attribute

When set totrue , the full table will show a loading state, featuring a radial indicator.

type: boolean

Default: false

Property

loadingOptions

Sets the props for the circular loading indicator used in the loading state.

type: { description?: string; label?: string; labelDuration?: number; max?: number; min?: number; progress?: number; monochrome?: boolean; overlay?: boolean; } - undefined | { description?: string | undefined; label?: string | undefined; labelDuration?: number | undefined; max?: number | undefined; min?: number | undefined; progress?: number | undefined; monochrome?: boolean | undefined; overlay?: boolean | undefined; }

Property

maxWidth

Attribute

max-width

Sets the maximum width of the data table. Can be set inpx ,rem , or% .

type: string - string | undefined

Property

minWidth

Attribute

min-width

Sets the minimum width of the data table. Can be set inpx ,rem , or% .

type: string - string | undefined

Property

minimumLoadingDisplayDuration

Attribute

minimum-loading-display-duration

The minimum amount of time theloading state displays for before showing the data. Used to prevent flashing in the component.

type: number

Default: 1000

Property

paginationBarOptions

Sets the props for the built-in pagination bar. If thepagination-bar slot is used then this prop is ignored.

type: IcPaginationBarOptions - export interface IcPaginationBarOptions { alignment?: IcPaginationAlignmentOptions; hideAllFromItemsPerPage?: boolean; hideCurrentPage?: boolean; hideFirstAndLastPageButton?: boolean; hideRangeLabel?: boolean; itemLabel?: string; itemsPerPageOptions?: { label: string; value: string }[]; monochrome?: boolean; pageLabel?: string; rangeLabelType?: IcPaginationLabelTypes; selectedItemsPerPage?: number; selectItemsPerPageOnEnter?: boolean; setToFirstPageOnPaginationChange?: boolean; showGoToPageControl?: boolean; showItemsPerPageControl?: boolean; theme?: IcThemeMode; type?: IcPaginationTypes; }

Default: { alignment: "right", hideAllFromItemsPerPage: false, hideCurrentPage: false, hideFirstAndLastPageButton: false, hideRangeLabel: false, itemLabel: "Item", itemsPerPageOptions: [ { label: "10", value: "10" }, { label: "25", value: "25" }, { label: "50", value: "50" }, ], monochrome: false, pageLabel: "Page", rangeLabelType: "page", selectedItemsPerPage: 10, selectItemsPerPageOnEnter: true, setToFirstPageOnPaginationChange: false, showGoToPageControl: true, showItemsPerPageControl: true, type: "simple", }

Property

rowSelection

Attribute

row-selection

Iftrue , a checkbox column will be displayed to the left of the table which allows multiple rows to be selected.

type: boolean

Default: false

Property

showPagination

Attribute

show-pagination

Iftrue , adds a pagination bar to the bottom of the table.

type: boolean - boolean | undefined

Default: false

Property

sortOptions

Sets the order columns will be sorted in and allows for 'default' sorts to be added.

type: { sortOrders: IcDataTableSortOrderOptions[]; defaultColumn?: string; } - { sortOrders: IcDataTableSortOrderOptions[]; defaultColumn?: string | undefined; }

Default: { sortOrders: ["unsorted", "ascending", "descending"], defaultColumn: "", }

Property

sortable

Attribute

sortable

Iftrue , allows table columns to be sorted using applied sort buttons.

type: boolean - boolean | undefined

Default: false

Property

stickyColumnHeaders

Attribute

sticky-column-headers

Iftrue , column headers will remain at the top of the table when scrolling vertically.

type: boolean

Default: false

Property

stickyRowHeaders

Attribute

sticky-row-headers

Iftrue , row headers will remain to the left when scrolling horizontally.

type: boolean

Default: false

Property

tableLayout

Attribute

table-layout

Sets the layout of the table

type: "fixed" | "auto" - "auto" | "fixed" | undefined

Default: "fixed"

Property

theme

Attribute

theme

Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.

type: IcThemeMode - "dark" | "inherit" | "light" | undefined

Default: "inherit"

Property

truncationPattern

Attribute

truncation-pattern

Sets the method used to truncate long text in cells where textWrap isfalse . Thetooltip truncation pattern allows the overflowing text to be seen in a tooltip. Theshow-hide truncation pattern allows the overflowing text to be shown and hidden using the ic-typography "See more"/"See less" buttons.

type: IcDataTableTruncationTypes - "show-hide" | "tooltip" | undefined

Property

updating

Attribute

updating

Iftrue , the table displays a linear loading indicator below the header row to indicate an updating state.

type: boolean

Default: false

Property

updatingOptions

Sets the props for the linear loading indicator used in the updating state.

type: { description?: string; max?: number; min?: number; progress?: number; monochrome?: boolean; } - undefined | { description?: string | undefined; max?: number | undefined; min?: number | undefined; progress?: number | undefined; monochrome?: boolean | undefined; }

Property

variableRowHeight

Allows for custom setting of row heights on individual rows based on an individual value from thedata prop and the row index. If the function returnsnull , that row's height will be set to theglobalRowHeight property.

type: (params: { [key: string]: any; index: number; }) => IcDataTableRowHeights | null - ((params: { [key: string]: any; index: number; }) => IcDataTableRowHeights | null) | undefined

Property

width

Attribute

width

Sets the table width. Can be set toauto or a specific value inpx ,rem , or% .

type: string - string | undefined

Slots

A slot allows for any type of element or markup to be passed into and rendered within a web component. This creates more flexibility than using a prop which must take a specific type of data.

Content can be slotted into a component by adding it as a top-level child of the component.

Slots can have a name to identify them. These specify which slot the content will be inserted into, and therefore where it will be rendered and how it will be used within the component. The name of the slot to be used can be specified by passing it via a slot attribute on the slotted content.

Name	Description
Slot empty-state	Content is slotted below the table header when there is no data and the table is not loading.
Slot pagination-bar	A custom ic-pagination-bar can be slotted below the data to provide enhanced control over how the data is interacted with when being fetched externally.
Slot