[component]

Dev Mode
DataTable
Description
DataTable takes arrays of arrays of data and handles them correctly to build a table. It supports pinnable columns unlike Table, but is less flexible.
Column 1
ⓘ
Column 2
Column 3
Column 4
Column 5
Checked
Custom
Data 1 has some data in it
Row 2 short
Row 3 very long, lots of overflow here, wow is this still going? I hope it all fits!
Row 4
Row 5
Row 6
Row 7
Row 8
Row 9
Row 10
Data 2 has some longer data in it
5
1000.4
2024-01-01
Custom: Custom text
Row 2 long
10
2000
2024-01-02
Custom: Custom text
Row 3 long
1
2
2024-01-03
Custom: Custom text
Row 4
1
2
2024-01-04
Custom: Custom text
Row 5
1
2
2024-01-05
Custom: Custom text
Row 6
1
2
2024-01-06
Custom: Custom text
Row 7
1
2
2024-01-07
Custom: Custom text
Row 8
1
2
2024-01-08
Custom: Custom text
Row 9
1
2
2024-01-09
Custom: Custom text
Row 10
1
2
2024-01-10
Custom: Custom text
1
2
Usage Guidelines
Do
Display structured data in a scannable way.
Allow users to compare information in rows and columns.
Keep scannability in mind whenever designing new components for this pattern.
Don't
Don’t use this if there will never be enough data to populate more than two rows.
Display content that can’t be reasonably sorted and compared.
Accessibility
Use a label to announce the content of the table.
Don’t include the word 'table' in that label, as it’s redundant.
The tab key should place focus on interactive elements, including sortable headers.
Props
Name
Type
Required
Description
columns
Required
data
Required
additionalFilters
Filter definitions that are not attached to a visible column.
alternateRowBackground
boolean
customColumnComponentMap
DataTableCustomComponentMap
defaultTextSize
emptyContent
ReactNode
Content shown below the header when
filterValues
Record
Controlled column filter draft/applied values keyed by field (and
getRowTestID
Returns a stable key for row test ids. Defaults to row index when omitted.
headerHeight
number
moreContentComponent
ComponentType
When tapping the eye icon, a modal is shown with more info about the row.
moreContentExtraData
onFilterValuesChange
onQueryChange
Fires when debounced search or applied filters change. Excludes page, limit, and sort.
onSearchChange
Status
Documentation:
Figma:
Web:
iOS:
Android:
Additional Documentation
NN/g article
Examples
StandardDataTable
Column 1
ⓘ
Column 2
Column 3
Column 4
Column 5
Checked
Custom
Data 1 has some data in it
Row 2 short
Row 3 very long, lots of overflow here, wow is this still going? I hope it all fits!
Row 4
Row 5
Row 6
Row 7
Row 8
Row 9
Row 10
Data 2 has some longer data in it
5
1000.4
2024-01-01
Custom: Custom text
Row 2 long
10
2000
2024-01-02
Custom: Custom text
Row 3 long
1
2
2024-01-03
Custom: Custom text
Row 4
1
2
2024-01-04
Custom: Custom text
Row 5
1
2
2024-01-05
Custom: Custom text
Row 6
1
2
2024-01-06
Custom: Custom text
Row 7
1
2
2024-01-07
Custom: Custom text
Row 8
1
2
2024-01-08
Custom: Custom text
Row 9
1
2
2024-01-09
Custom: Custom text
Row 10
1
2
2024-01-10
Custom: Custom text
1
2
FilterableDataTable
Latest query: {}
Search
Name
Active
Created
Role
Alice
2024-01-01
admin
Bob
2024-02-01
staff
LargeVirtualizedDataTable
1200 rows — scroll vertically to load distant rows and sort pinned headers.
Name
Department
Score
Active
Custom
Employee 1
Employee 2
Employee 3
Employee 4
Employee 5
Employee 6
Employee 7
Employee 8
Employee 9
Employee 10
Employee 11
Employee 12
Employee 13
Employee 14
Employee 15
Team 1
0
Custom: Badge 1
Team 2
3
Custom: Badge 2
Team 3
6
Custom: Badge 3
Team 4
9
Custom: Badge 4
Team 5
12
Custom: Badge 5
Team 6
15
Custom: Badge 6
Team 7
18
Custom: Badge 7
Team 8
21
Custom: Badge 8
Team 9
24
Custom: Badge 9
Team 10
27
Custom: Badge 10
Team 11
30
Custom: Badge 11
Team 12
33
Custom: Badge 12
Team 1
36
Custom: Badge 13
Team 2
39
Custom: Badge 14
Team 3
42
Custom: Badge 15