Skip to main contentCarbon Design System

Data table

Default

DataTable

NameProtocolPortRuleAttached GroupsStatus
Load Balancer 3HTTP3000Round robinKevins VM GroupsDisabled
Load Balancer 1HTTP443Round robinMaureens VM GroupsStarting
Load Balancer 2HTTP80DNS delegationAndrews VM GroupsActive
Load Balancer 6HTTP3000Round robinMarcs VM GroupsDisabled
Load Balancer 4HTTP443Round robinMels VM GroupsStarting
Load Balancer 5HTTP80DNS delegationRonjas VM GroupsActive
DataTable
Modifiers
Table
Modifiers
size

With expansion

DataTable with expansion

NameProtocolPortRuleAttached GroupsStatus
Load Balancer 3HTTP3000Round robinKevins VM GroupsDisabled
Load Balancer 1HTTP443Round robinMaureens VM GroupsStarting
Load Balancer 2HTTP80DNS delegationAndrews VM GroupsActive
Load Balancer 6HTTP3000Round robinMarcs VM GroupsDisabled
Load Balancer 4HTTP443Round robinMels VM GroupsStarting
Load Balancer 5HTTP80DNS delegationRonjas VM GroupsActive
DataTable
Modifiers
Table
Modifiers
size

With selection

DataTable with selection

NameProtocolPortRuleAttached GroupsStatus
Load Balancer 3HTTP3000Round robinKevins VM GroupsDisabled
Load Balancer 1HTTP443Round robinMaureens VM GroupsStarting
Load Balancer 2HTTP80DNS delegationAndrews VM GroupsActive
Load Balancer 6HTTP3000Round robinMarcs VM GroupsDisabled
Load Balancer 4HTTP443Round robinMels VM GroupsStarting
Load Balancer 5HTTP80DNS delegationRonjas VM GroupsActive
DataTable
Modifiers
Table
Modifiers
size

Sample data

const headerData = [
{
header: "Name",
key: "name",
},
{
header: "Protocol",
key: "protocol",
},