@gitlab/ui/dist/components/base/table/table.documentation.js

GitLab UI Components

import examples from './examples';

var description = "## Usage\n\nThe `gl-table` component wraps BootstrapVue `b-table` component. `b-table` provides a variety of\nslots for custom data rendering. You can learn more about them in the\n[component documentation](https://bootstrap-vue.org/docs/components/table).\nWhen using the component, pass in the `fields` prop as part of the `$options`, and give each table\ndata and table head its own styles if necessary.\n\n## Internationalization\n\nTo ensure we internationalize field labels, always pass an array of objects for the `fields` prop,\nlike mentioned in the implementation example.\n\n_Full documentation for the\n`field` prop [here.](https://bootstrap-vue.org/docs/components/table#fields-column-definitions)_\n\n## Use `GlTableLite` when possible\n\nIf you don't need all the features of `GlTable`, like filtering, sorting, or\npagination, use `GlTableLite` which offers a subset of `GlTable` features.\n\n## Implementation Example\n\n```html\n<script>\n  export default {\n    fields: [\n      {\n        key: 'column_one',\n        label: __('Column One'),\n        thClass: 'w-60p',\n        tdClass: 'table-col d-flex'\n      },\n      {\n        key: 'col_2',\n        label: __('Column 2'),\n        thClass: 'w-15p',\n        tdClass: 'table-col d-flex'\n      },\n    ];\n  }\n</script>\n<template>\n  <gl-table :items=\"items\" :fields=\"$options.fields\">\n    <template #head(column_one)>\n      <div>Column One</div>\n      <!-- This is the column head for the first object in `fields` -->\n    </template>\n\n    <template #cell(column_one)>\n      This is the template for column data belonging to the first object\n    </template>\n  </gl-table>\n</template>\n```\n";

var table_documentation = {
  followsDesignSystem: false,
  description,
  examples,
  bootstrapComponent: 'b-table'
};

export default table_documentation;