{"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":"ede16ebd-c535-5bf0-9e10-adda4c3b4888","children":[],"parent":"b0cd389d-4018-549d-9ee6-552133673fc1","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\n## Data table\n\n<ComponentCode\n  name=\"Data table\"\n  component=\"data-table\"\n  variation=\"data-table\"\n  hasReactVersion=\"datatable--default\"\n  hasVueVersion=\"datatable--default\"\n  hasAngularVersion=\"?path=/story/table--default\"\n  codepen=\"jRWbZZ\"></ComponentCode>\n\n## Expandable data table\n\n<ComponentCode\n  name=\"Expandable data table\"\n  component=\"data-table\"\n  variation=\"data-table--expandable\"\n  hasReactVersion=\"datatable--with-expansion\"\n  hasVueVersion=\"datatable--slotted-expanding-data\"\n  hasAngularVersion=\"?path=/story/table--with-expansion\"\n  codepen=\"wZMKme\"></ComponentCode>\n\n## Data table with pagination\n\n<ComponentCode\n  name=\"Data table with pagination\"\n  component=\"data-table\"\n  variation=\"data-table--with-pager\"\n  hasVueVersion=\"datatable--default\"\n  hasAngularVersion=\"?path=/story/table--with-pagination\"\n  codepen=\"MRKaBq\"></ComponentCode>\n\n<!--\n\n## Small data table\n\n<ComponentCode\n    name=\"Small data table\"\n    component=\"data-table\"\n    variation=\"data-table--small\"\n    hasAngularVersion=\"?path=/story/table--default&knob-size=sm&knob-showSelectionColumn=true&knob-striped=true&knob-sortable=true&knob-Data grid keyboard interactions=\n    >\n</ComponentCode>\n\n## Toolbar\n\n<ComponentCode\n    name=\"Toolbar\"\n    component=\"toolbar\"\n    variation=\"toolbar\"\n    hasVueVersion=\"toolbar--default\"\n    hasAngularVersion=\"?path=/story/table--with-toolbar\"\n    >\n</ComponentCode>\n-->\n\n## Documentation\n\n<ComponentDocs component=\"data-table\" />\n","type":"Mdx","contentDigest":"7a3b45f0b5ba77abcb04859cdc6f0a66","counter":1500,"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\n## Data table\n\n<ComponentCode\n  name=\"Data table\"\n  component=\"data-table\"\n  variation=\"data-table\"\n  hasReactVersion=\"datatable--default\"\n  hasVueVersion=\"datatable--default\"\n  hasAngularVersion=\"?path=/story/table--default\"\n  codepen=\"jRWbZZ\"></ComponentCode>\n\n## Expandable data table\n\n<ComponentCode\n  name=\"Expandable data table\"\n  component=\"data-table\"\n  variation=\"data-table--expandable\"\n  hasReactVersion=\"datatable--with-expansion\"\n  hasVueVersion=\"datatable--slotted-expanding-data\"\n  hasAngularVersion=\"?path=/story/table--with-expansion\"\n  codepen=\"wZMKme\"></ComponentCode>\n\n## Data table with pagination\n\n<ComponentCode\n  name=\"Data table with pagination\"\n  component=\"data-table\"\n  variation=\"data-table--with-pager\"\n  hasVueVersion=\"datatable--default\"\n  hasAngularVersion=\"?path=/story/table--with-pagination\"\n  codepen=\"MRKaBq\"></ComponentCode>\n\n<!--\n\n## Small data table\n\n<ComponentCode\n    name=\"Small data table\"\n    component=\"data-table\"\n    variation=\"data-table--small\"\n    hasAngularVersion=\"?path=/story/table--default&knob-size=sm&knob-showSelectionColumn=true&knob-striped=true&knob-sortable=true&knob-Data grid keyboard interactions=\n    >\n</ComponentCode>\n\n## Toolbar\n\n<ComponentCode\n    name=\"Toolbar\"\n    component=\"toolbar\"\n    variation=\"toolbar\"\n    hasVueVersion=\"toolbar--default\"\n    hasAngularVersion=\"?path=/story/table--with-toolbar\"\n    >\n</ComponentCode>\n-->\n\n## Documentation\n\n<ComponentDocs component=\"data-table\" />\n","fileAbsolutePath":"/zeit/1dde86ed/src/pages/components/data-table/code.mdx"}}}}