Skip to main content

styling

Title

You can optionally provide a title for the table using the title prop.

<DataTable title='Cats' />
Cats
Cats
Name
Breed
Age
Birthdate
Last Checkup
Nationality
Microchip
Title
Identifier
Display Name
IP Address
Skills
Filter
Filter
Filter
Filter
Selkirk Rex
17
2008-02-08T18:48:47.009Z
2025-03-30T17:08:37.394Z
πŸ‡²πŸ‡΅
Legacy Implementation Liaison
0
Aric35
177.221.104.53
Hunting
American Shorthair
3
2022-01-11T19:38:47.327Z
2025-09-20T18:22:06.143Z
πŸ‡΅πŸ‡²
Principal Applications Developer
1
Jocelyn_Koelpin
183.178.38.10
Playing
Havana
17
2007-12-02T16:09:32.758Z
2025-03-27T23:53:33.990Z
πŸ‡³πŸ‡«
Investor Applications Administrator
2
Kathleen.Mosciski57
186.101.171.88
Hunting
Japanese Bobtail
–
2007-05-16T14:16:12.809Z
2025-07-02T10:03:51.929Z
πŸ‡¬πŸ‡³
Internal Infrastructure Planner
3
Crystal49
a36a:a9ed:0bdc:1feb:1854:e72d:11a4:43cb
Purring
American Wirehair
20
2005-03-20T05:26:51.899Z
2025-11-01T17:56:07.953Z
πŸ‡°πŸ‡­
Customer Optimization Administrator
4
Beverly59
4b1b:da8f:8528:04a2:c454:39e4:da0f:b2bb
Climbing
Himalayan
–
2024-11-23T15:17:50.905Z
2025-02-26T09:06:36.021Z
πŸ‡»πŸ‡¬
Forward Identity Assistant
5
May.Prosacco86
c73b:f2e2:f8db:0cef:aaa6:4d3c:8dcd:17e1
Sleeping
American Bobtail
12
2013-05-10T22:59:10.107Z
2025-03-20T13:16:31.031Z
πŸ΄β€β˜ οΈ
Legacy Group Manager
6
Audie.Hackett
193.225.156.126
Meowing
Exotic Shorthair
11
2014-02-03T02:29:26.148Z
2025-05-07T01:49:29.124Z
πŸ‡±πŸ‡Ή
International Mobility Architect
7
Christy.Bode-Lueilwitz11
203.128.8.19
Meowing
Peterbald
20
–
2025-01-08T03:41:04.126Z
πŸ‡ΊπŸ‡³
Chief Intranet Technician
8
Janae7
11.134.30.108
Jumping
American Shorthair
14
2011-05-14T02:26:51.612Z
2025-08-22T01:07:28.240Z
πŸ‡«πŸ‡·
Legacy Quality Analyst
9
Darrel.Simonis26
ae80:6f80:acc6:4188:fa52:edef:eefe:19f2
Scratching
Showing 1-10 of 1000
1 of 100......
10 Rows
Showing 1-10 of 1000
1 of 100......
10 Rows

Title with Icon

You can also supplement the title with an icon using the titleIcon prop.

<DataTable title='Cats' titleIcon={faCat} />
Cats
Cats
Name
Breed
Age
Birthdate
Last Checkup
Nationality
Microchip
Title
Identifier
Display Name
IP Address
Skills
Filter
Filter
Filter
Filter
Selkirk Rex
17
2008-02-08T18:48:47.009Z
2025-03-30T17:08:37.394Z
πŸ‡²πŸ‡΅
Legacy Implementation Liaison
0
Aric35
177.221.104.53
Hunting
American Shorthair
3
2022-01-11T19:38:47.327Z
2025-09-20T18:22:06.143Z
πŸ‡΅πŸ‡²
Principal Applications Developer
1
Jocelyn_Koelpin
183.178.38.10
Playing
Havana
17
2007-12-02T16:09:32.758Z
2025-03-27T23:53:33.990Z
πŸ‡³πŸ‡«
Investor Applications Administrator
2
Kathleen.Mosciski57
186.101.171.88
Hunting
Japanese Bobtail
–
2007-05-16T14:16:12.809Z
2025-07-02T10:03:51.929Z
πŸ‡¬πŸ‡³
Internal Infrastructure Planner
3
Crystal49
a36a:a9ed:0bdc:1feb:1854:e72d:11a4:43cb
Purring
American Wirehair
20
2005-03-20T05:26:51.899Z
2025-11-01T17:56:07.953Z
πŸ‡°πŸ‡­
Customer Optimization Administrator
4
Beverly59
4b1b:da8f:8528:04a2:c454:39e4:da0f:b2bb
Climbing
Himalayan
–
2024-11-23T15:17:50.905Z
2025-02-26T09:06:36.021Z
πŸ‡»πŸ‡¬
Forward Identity Assistant
5
May.Prosacco86
c73b:f2e2:f8db:0cef:aaa6:4d3c:8dcd:17e1
Sleeping
American Bobtail
12
2013-05-10T22:59:10.107Z
2025-03-20T13:16:31.031Z
πŸ΄β€β˜ οΈ
Legacy Group Manager
6
Audie.Hackett
193.225.156.126
Meowing
Exotic Shorthair
11
2014-02-03T02:29:26.148Z
2025-05-07T01:49:29.124Z
πŸ‡±πŸ‡Ή
International Mobility Architect
7
Christy.Bode-Lueilwitz11
203.128.8.19
Meowing
Peterbald
20
–
2025-01-08T03:41:04.126Z
πŸ‡ΊπŸ‡³
Chief Intranet Technician
8
Janae7
11.134.30.108
Jumping
American Shorthair
14
2011-05-14T02:26:51.612Z
2025-08-22T01:07:28.240Z
πŸ‡«πŸ‡·
Legacy Quality Analyst
9
Darrel.Simonis26
ae80:6f80:acc6:4188:fa52:edef:eefe:19f2
Scratching
Showing 1-10 of 1000
1 of 100......
10 Rows
Showing 1-10 of 1000
1 of 100......
10 Rows
Search and Title

When using title or title with icon, the global table search in the toolbar is changed to a button. This makes search slightly less discoverable. We therefore recommend only using these options when necessary to distinguish between multiple tables on the same page.

Border

You can enable a border around the table by using the border prop.

<DataTable border />
Name
Breed
Age
Birthdate
Last Checkup
Nationality
Microchip
Title
Identifier
Display Name
IP Address
Skills
Filter
Filter
Filter
Filter
Selkirk Rex
17
2008-02-08T18:48:47.009Z
2025-03-30T17:08:37.394Z
πŸ‡²πŸ‡΅
Legacy Implementation Liaison
0
Aric35
177.221.104.53
Hunting
American Shorthair
3
2022-01-11T19:38:47.327Z
2025-09-20T18:22:06.143Z
πŸ‡΅πŸ‡²
Principal Applications Developer
1
Jocelyn_Koelpin
183.178.38.10
Playing
Havana
17
2007-12-02T16:09:32.758Z
2025-03-27T23:53:33.990Z
πŸ‡³πŸ‡«
Investor Applications Administrator
2
Kathleen.Mosciski57
186.101.171.88
Hunting
Japanese Bobtail
–
2007-05-16T14:16:12.809Z
2025-07-02T10:03:51.929Z
πŸ‡¬πŸ‡³
Internal Infrastructure Planner
3
Crystal49
a36a:a9ed:0bdc:1feb:1854:e72d:11a4:43cb
Purring
American Wirehair
20
2005-03-20T05:26:51.899Z
2025-11-01T17:56:07.953Z
πŸ‡°πŸ‡­
Customer Optimization Administrator
4
Beverly59
4b1b:da8f:8528:04a2:c454:39e4:da0f:b2bb
Climbing
Himalayan
–
2024-11-23T15:17:50.905Z
2025-02-26T09:06:36.021Z
πŸ‡»πŸ‡¬
Forward Identity Assistant
5
May.Prosacco86
c73b:f2e2:f8db:0cef:aaa6:4d3c:8dcd:17e1
Sleeping
American Bobtail
12
2013-05-10T22:59:10.107Z
2025-03-20T13:16:31.031Z
πŸ΄β€β˜ οΈ
Legacy Group Manager
6
Audie.Hackett
193.225.156.126
Meowing
Exotic Shorthair
11
2014-02-03T02:29:26.148Z
2025-05-07T01:49:29.124Z
πŸ‡±πŸ‡Ή
International Mobility Architect
7
Christy.Bode-Lueilwitz11
203.128.8.19
Meowing
Peterbald
20
–
2025-01-08T03:41:04.126Z
πŸ‡ΊπŸ‡³
Chief Intranet Technician
8
Janae7
11.134.30.108
Jumping
American Shorthair
14
2011-05-14T02:26:51.612Z
2025-08-22T01:07:28.240Z
πŸ‡«πŸ‡·
Legacy Quality Analyst
9
Darrel.Simonis26
ae80:6f80:acc6:4188:fa52:edef:eefe:19f2
Scratching
Showing 1-10 of 1000
1 of 100......
10 Rows
Showing 1-10 of 1000
1 of 100......
10 Rows

Bifrost Table Styles

Some different styling choices have been made compared to the default Bifrost Table styles to better fit the needs of a complex data grid. If you want to use the default Bifrost Table styles, you can re-enable some of them by setting bifrostTableProps, which is passed to the underlying Bifrost Table component.

This isn't a highly supported configuration, we generally recommend using the default styles. If the default styling does not fit your needs, we recommend submitting a feature request.

<DataTable bifrostTableProps={{ noBorder: false, noShadow: false }} />
Name
Breed
Age
Birthdate
Last Checkup
Nationality
Microchip
Title
Identifier
Display Name
IP Address
Skills
Filter
Filter
Filter
Filter
Selkirk Rex
17
2008-02-08T18:48:47.009Z
2025-03-30T17:08:37.394Z
πŸ‡²πŸ‡΅
Legacy Implementation Liaison
0
Aric35
177.221.104.53
Hunting
American Shorthair
3
2022-01-11T19:38:47.327Z
2025-09-20T18:22:06.143Z
πŸ‡΅πŸ‡²
Principal Applications Developer
1
Jocelyn_Koelpin
183.178.38.10
Playing
Havana
17
2007-12-02T16:09:32.758Z
2025-03-27T23:53:33.990Z
πŸ‡³πŸ‡«
Investor Applications Administrator
2
Kathleen.Mosciski57
186.101.171.88
Hunting
Japanese Bobtail
–
2007-05-16T14:16:12.809Z
2025-07-02T10:03:51.929Z
πŸ‡¬πŸ‡³
Internal Infrastructure Planner
3
Crystal49
a36a:a9ed:0bdc:1feb:1854:e72d:11a4:43cb
Purring
American Wirehair
20
2005-03-20T05:26:51.899Z
2025-11-01T17:56:07.953Z
πŸ‡°πŸ‡­
Customer Optimization Administrator
4
Beverly59
4b1b:da8f:8528:04a2:c454:39e4:da0f:b2bb
Climbing
Himalayan
–
2024-11-23T15:17:50.905Z
2025-02-26T09:06:36.021Z
πŸ‡»πŸ‡¬
Forward Identity Assistant
5
May.Prosacco86
c73b:f2e2:f8db:0cef:aaa6:4d3c:8dcd:17e1
Sleeping
American Bobtail
12
2013-05-10T22:59:10.107Z
2025-03-20T13:16:31.031Z
πŸ΄β€β˜ οΈ
Legacy Group Manager
6
Audie.Hackett
193.225.156.126
Meowing
Exotic Shorthair
11
2014-02-03T02:29:26.148Z
2025-05-07T01:49:29.124Z
πŸ‡±πŸ‡Ή
International Mobility Architect
7
Christy.Bode-Lueilwitz11
203.128.8.19
Meowing
Peterbald
20
–
2025-01-08T03:41:04.126Z
πŸ‡ΊπŸ‡³
Chief Intranet Technician
8
Janae7
11.134.30.108
Jumping
American Shorthair
14
2011-05-14T02:26:51.612Z
2025-08-22T01:07:28.240Z
πŸ‡«πŸ‡·
Legacy Quality Analyst
9
Darrel.Simonis26
ae80:6f80:acc6:4188:fa52:edef:eefe:19f2
Scratching
Showing 1-10 of 1000
1 of 100......
10 Rows
Showing 1-10 of 1000
1 of 100......
10 Rows