{"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":"d23adaa5-670e-5a4d-81c4-41e6449ad4c5","children":[],"parent":"c126611a-f857-589a-9ace-6eceda343b58","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  }}\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  }}\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  }}\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":"d34ad3c87f9daffd629a9e6fcd87cce8","counter":1475,"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  }}\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  }}\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  }}\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/3b23ef32/src/pages/components/data-table/code.mdx"}}}}