Skip to main contentCarbon Design System

Data table

Preview the data table component with the React live demo. For detailed code usage documentation, see the Storybooks for each framework below.

Documentation

Live demo

DataTable

Name
Protocol
Port
Rule
Attached Groups
Status
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',
},