{"componentChunkName":"component---src-pages-components-data-table-code-mdx","path":"/components/data-table/code/","result":{"pageContext":{"frontmatter":{"title":"Data table","description":"The data table component allows for the flexible display and sorting of information.","tabs":["Code","Usage","Style","Accessibility"]},"relativePagePath":"/components/data-table/code.mdx","titleType":"prepend","MdxNode":{"id":"81d5be41-ee00-5977-8d9a-d56db70c9a20","children":[],"parent":"b69c5121-f188-5591-b2b6-ab67a4741414","internal":{"content":"---\ntitle: Data table\ndescription: The data table component allows for the flexible display and sorting of information.\ntabs: ['Code', 'Usage', 'Style', 'Accessibility']\n---\n\nimport { rowData, headerData } from '../../../data/components/data-table.js';\n\n## Default\n\n<ComponentDemo\n  scope={{ rowData, headerData, React }}\n  knobs={{ DataTable: ['isSortable'], Table: ['size', 'useZebraStyles'] }}\n  links={{\n    React:\n      'https://react.carbondesignsystem.com/?path=/story/datatable--default',\n    Angular:\n      'https://angular.carbondesignsystem.com/?path=/story/components-table--basic',\n    Vue:\n      'http://vue.carbondesignsystem.com/?path=/story/components-cvdatatable--default',\n    Vanilla: 'https://the-carbon-components.netlify.com/?nav=data-table',\n  }}>{`<DataTable \n  rows={rowData} \n  headers={headerData} \n  render={({ rows, headers, getHeaderProps }) => (\n  <TableContainer title=\"DataTable\">\n    <Table>\n      <TableHead>\n        <TableRow>\n          {headers.map(header => (\n            <TableHeader {...getHeaderProps({ header })}>\n              {header.header}\n            </TableHeader>\n          ))}\n        </TableRow>\n      </TableHead>\n      <TableBody>\n        {rows.map(row => (\n          <TableRow key={row.id}>\n            {row.cells.map(cell => (\n              <TableCell key={cell.id}>{cell.value}</TableCell>\n            ))}\n          </TableRow>\n        ))}\n      </TableBody>\n    </Table>\n  </TableContainer>)}\n/>`}</ComponentDemo>\n\n## With expansion\n\n<ComponentDemo\n  scope={{ rowData, headerData }}\n  knobs={{ DataTable: ['isSortable'], Table: ['size', 'useZebraStyles'] }}\n  links={{\n    React:\n      'https://react.carbondesignsystem.com/?path=/story/datatable--default',\n    Angular:\n      'https://angular.carbondesignsystem.com/?path=/story/components-table--basic',\n    Vue:\n      'http://vue.carbondesignsystem.com/?path=/story/components-cvdatatable--default',\n    Vanilla: 'https://the-carbon-components.netlify.com/?nav=data-table',\n  }}>{`<DataTable \n  rows={rowData} \n  headers={headerData} \n  render={({ rows, headers, getHeaderProps, getRowProps, getTableProps }) => (\n  <TableContainer title=\"DataTable with expansion\">\n    <Table {...getTableProps()}>\n      <TableHead>\n        <TableRow>\n          <TableExpandHeader />\n          {headers.map(header => (\n            <TableHeader {...getHeaderProps({ header })}>\n              {header.header}\n            </TableHeader>\n          ))}\n        </TableRow>\n      </TableHead>\n      <TableBody>\n        {rows.map(row => (\n          <React.Fragment key={row.id}>\n            <TableExpandRow {...getRowProps({ row })}>\n              {row.cells.map(cell => (\n                <TableCell key={cell.id}>{cell.value}</TableCell>\n              ))}\n            </TableExpandRow>\n            {row.isExpanded && (\n              <TableExpandedRow colSpan={headers.length + 1}>\n                <p>Aux squad rules</p>\n              </TableExpandedRow>\n            )}\n          </React.Fragment>\n        ))}\n      </TableBody>\n    </Table>\n  </TableContainer>\n)}/>`}</ComponentDemo>\n\n## With selection\n\n<ComponentDemo\n  scope={{ rowData, headerData }}\n  knobs={{ DataTable: ['isSortable'], Table: ['size', 'useZebraStyles'] }}\n  links={{\n    React:\n      'https://react.carbondesignsystem.com/?path=/story/datatable--default',\n    Angular:\n      'https://angular.carbondesignsystem.com/?path=/story/components-table--basic',\n    Vue:\n      'http://vue.carbondesignsystem.com/?path=/story/components-cvdatatable--default',\n    Vanilla: 'https://the-carbon-components.netlify.com/?nav=data-table',\n  }}>{`<DataTable \n  rows={rowData} \n  headers={headerData} \n  render={({ rows, headers, getHeaderProps, getSelectionProps, getRowProps }) => (\n  <TableContainer title=\"DataTable with selection\">\n    <Table>\n      <TableHead>\n        <TableRow>\n          <TableSelectAll {...getSelectionProps()} />\n          {headers.map(header => (\n            <TableHeader {...getHeaderProps({ header })}>\n              {header.header}\n            </TableHeader>\n          ))}\n        </TableRow>\n      </TableHead>\n      <TableBody>\n        {rows.map(row => (\n          <TableRow {...getRowProps({ row })}>\n            <TableSelectRow {...getSelectionProps({ row })} />\n            {row.cells.map(cell => (\n              <TableCell key={cell.id}>{cell.value}</TableCell>\n            ))}\n          </TableRow>\n        ))}\n      </TableBody>\n    </Table>\n  </TableContainer>)}\n/>`}</ComponentDemo>\n\n## Sample data\n\n```javascript\nconst headerData = [\n  {\n    header: 'Name',\n    key: 'name',\n  },\n  {\n    header: 'Protocol',\n    key: 'protocol',\n  },\n  {\n    header: 'Port',\n    key: 'port',\n  },\n  {\n    header: 'Rule',\n    key: 'rule',\n  },\n  {\n    header: 'Attached Groups',\n    key: 'attached_groups',\n  },\n  {\n    header: 'Status',\n    key: 'status',\n  },\n];\n\nconst rowData = [\n  {\n    attached_groups: 'Kevins VM Groups',\n    id: 'a',\n    name: 'Load Balancer 3',\n    port: 3000,\n    protocol: 'HTTP',\n    rule: 'Round robin',\n    status: 'Disabled',\n  },\n  {\n    attached_groups: 'Maureens VM Groups',\n    id: 'b',\n    name: 'Load Balancer 1',\n    port: 443,\n    protocol: 'HTTP',\n    rule: 'Round robin',\n    status: 'Starting',\n  },\n  {\n    attached_groups: 'Andrews VM Groups',\n    id: 'c',\n    name: 'Load Balancer 2',\n    port: 80,\n    protocol: 'HTTP',\n    rule: 'DNS delegation',\n    status: 'Active',\n  },\n  {\n    attached_groups: 'Marcs VM Groups',\n    id: 'd',\n    name: 'Load Balancer 6',\n    port: 3000,\n    protocol: 'HTTP',\n    rule: 'Round robin',\n    status: 'Disabled',\n  },\n  {\n    attached_groups: 'Mels VM Groups',\n    id: 'e',\n    name: 'Load Balancer 4',\n    port: 443,\n    protocol: 'HTTP',\n    rule: 'Round robin',\n    status: 'Starting',\n  },\n  {\n    attached_groups: 'Ronjas VM Groups',\n    id: 'f',\n    name: 'Load Balancer 5',\n    port: 80,\n    protocol: 'HTTP',\n    rule: 'DNS delegation',\n    status: 'Active',\n  },\n];\n```\n","type":"Mdx","contentDigest":"393acf9283d3c09cc076e745d5acbd2a","counter":1505,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Data table","description":"The data table component allows for the flexible display and sorting of information.","tabs":["Code","Usage","Style","Accessibility"]},"exports":{},"rawBody":"---\ntitle: Data table\ndescription: The data table component allows for the flexible display and sorting of information.\ntabs: ['Code', 'Usage', 'Style', 'Accessibility']\n---\n\nimport { rowData, headerData } from '../../../data/components/data-table.js';\n\n## Default\n\n<ComponentDemo\n  scope={{ rowData, headerData, React }}\n  knobs={{ DataTable: ['isSortable'], Table: ['size', 'useZebraStyles'] }}\n  links={{\n    React:\n      'https://react.carbondesignsystem.com/?path=/story/datatable--default',\n    Angular:\n      'https://angular.carbondesignsystem.com/?path=/story/components-table--basic',\n    Vue:\n      'http://vue.carbondesignsystem.com/?path=/story/components-cvdatatable--default',\n    Vanilla: 'https://the-carbon-components.netlify.com/?nav=data-table',\n  }}>{`<DataTable \n  rows={rowData} \n  headers={headerData} \n  render={({ rows, headers, getHeaderProps }) => (\n  <TableContainer title=\"DataTable\">\n    <Table>\n      <TableHead>\n        <TableRow>\n          {headers.map(header => (\n            <TableHeader {...getHeaderProps({ header })}>\n              {header.header}\n            </TableHeader>\n          ))}\n        </TableRow>\n      </TableHead>\n      <TableBody>\n        {rows.map(row => (\n          <TableRow key={row.id}>\n            {row.cells.map(cell => (\n              <TableCell key={cell.id}>{cell.value}</TableCell>\n            ))}\n          </TableRow>\n        ))}\n      </TableBody>\n    </Table>\n  </TableContainer>)}\n/>`}</ComponentDemo>\n\n## With expansion\n\n<ComponentDemo\n  scope={{ rowData, headerData }}\n  knobs={{ DataTable: ['isSortable'], Table: ['size', 'useZebraStyles'] }}\n  links={{\n    React:\n      'https://react.carbondesignsystem.com/?path=/story/datatable--default',\n    Angular:\n      'https://angular.carbondesignsystem.com/?path=/story/components-table--basic',\n    Vue:\n      'http://vue.carbondesignsystem.com/?path=/story/components-cvdatatable--default',\n    Vanilla: 'https://the-carbon-components.netlify.com/?nav=data-table',\n  }}>{`<DataTable \n  rows={rowData} \n  headers={headerData} \n  render={({ rows, headers, getHeaderProps, getRowProps, getTableProps }) => (\n  <TableContainer title=\"DataTable with expansion\">\n    <Table {...getTableProps()}>\n      <TableHead>\n        <TableRow>\n          <TableExpandHeader />\n          {headers.map(header => (\n            <TableHeader {...getHeaderProps({ header })}>\n              {header.header}\n            </TableHeader>\n          ))}\n        </TableRow>\n      </TableHead>\n      <TableBody>\n        {rows.map(row => (\n          <React.Fragment key={row.id}>\n            <TableExpandRow {...getRowProps({ row })}>\n              {row.cells.map(cell => (\n                <TableCell key={cell.id}>{cell.value}</TableCell>\n              ))}\n            </TableExpandRow>\n            {row.isExpanded && (\n              <TableExpandedRow colSpan={headers.length + 1}>\n                <p>Aux squad rules</p>\n              </TableExpandedRow>\n            )}\n          </React.Fragment>\n        ))}\n      </TableBody>\n    </Table>\n  </TableContainer>\n)}/>`}</ComponentDemo>\n\n## With selection\n\n<ComponentDemo\n  scope={{ rowData, headerData }}\n  knobs={{ DataTable: ['isSortable'], Table: ['size', 'useZebraStyles'] }}\n  links={{\n    React:\n      'https://react.carbondesignsystem.com/?path=/story/datatable--default',\n    Angular:\n      'https://angular.carbondesignsystem.com/?path=/story/components-table--basic',\n    Vue:\n      'http://vue.carbondesignsystem.com/?path=/story/components-cvdatatable--default',\n    Vanilla: 'https://the-carbon-components.netlify.com/?nav=data-table',\n  }}>{`<DataTable \n  rows={rowData} \n  headers={headerData} \n  render={({ rows, headers, getHeaderProps, getSelectionProps, getRowProps }) => (\n  <TableContainer title=\"DataTable with selection\">\n    <Table>\n      <TableHead>\n        <TableRow>\n          <TableSelectAll {...getSelectionProps()} />\n          {headers.map(header => (\n            <TableHeader {...getHeaderProps({ header })}>\n              {header.header}\n            </TableHeader>\n          ))}\n        </TableRow>\n      </TableHead>\n      <TableBody>\n        {rows.map(row => (\n          <TableRow {...getRowProps({ row })}>\n            <TableSelectRow {...getSelectionProps({ row })} />\n            {row.cells.map(cell => (\n              <TableCell key={cell.id}>{cell.value}</TableCell>\n            ))}\n          </TableRow>\n        ))}\n      </TableBody>\n    </Table>\n  </TableContainer>)}\n/>`}</ComponentDemo>\n\n## Sample data\n\n```javascript\nconst headerData = [\n  {\n    header: 'Name',\n    key: 'name',\n  },\n  {\n    header: 'Protocol',\n    key: 'protocol',\n  },\n  {\n    header: 'Port',\n    key: 'port',\n  },\n  {\n    header: 'Rule',\n    key: 'rule',\n  },\n  {\n    header: 'Attached Groups',\n    key: 'attached_groups',\n  },\n  {\n    header: 'Status',\n    key: 'status',\n  },\n];\n\nconst rowData = [\n  {\n    attached_groups: 'Kevins VM Groups',\n    id: 'a',\n    name: 'Load Balancer 3',\n    port: 3000,\n    protocol: 'HTTP',\n    rule: 'Round robin',\n    status: 'Disabled',\n  },\n  {\n    attached_groups: 'Maureens VM Groups',\n    id: 'b',\n    name: 'Load Balancer 1',\n    port: 443,\n    protocol: 'HTTP',\n    rule: 'Round robin',\n    status: 'Starting',\n  },\n  {\n    attached_groups: 'Andrews VM Groups',\n    id: 'c',\n    name: 'Load Balancer 2',\n    port: 80,\n    protocol: 'HTTP',\n    rule: 'DNS delegation',\n    status: 'Active',\n  },\n  {\n    attached_groups: 'Marcs VM Groups',\n    id: 'd',\n    name: 'Load Balancer 6',\n    port: 3000,\n    protocol: 'HTTP',\n    rule: 'Round robin',\n    status: 'Disabled',\n  },\n  {\n    attached_groups: 'Mels VM Groups',\n    id: 'e',\n    name: 'Load Balancer 4',\n    port: 443,\n    protocol: 'HTTP',\n    rule: 'Round robin',\n    status: 'Starting',\n  },\n  {\n    attached_groups: 'Ronjas VM Groups',\n    id: 'f',\n    name: 'Load Balancer 5',\n    port: 80,\n    protocol: 'HTTP',\n    rule: 'DNS delegation',\n    status: 'Active',\n  },\n];\n```\n","fileAbsolutePath":"/zeit/3f757860/src/pages/components/data-table/code.mdx"}}}}