@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 slots for custom data rendering. You can learn more about them in the [component documentation](https://bootstrap-vue.js.org/docs/components/table). When using the component, pass in the `fields` prop as part of the `$options`,\nand give each table data 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, like mentioned in the implementation example.\n\n_Full documentation for the\n`field` prop [here.](https://bootstrap-vue.js.org/docs/components/table/#fields-columns-definitions)_\n\n### Implementation Example\n\n```js\n<script>\nexport 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\n    :items=\"items\"\n    :fields=\"$options.fields\"\n  >\n    <template #head(column_one)>\n      <div>Column One</div><!-- 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\n  </gl-table>\n</template>\n```\n";

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

export default table_documentation;