@gitlab/ui/src/components/base/table/table.md

GitLab UI Components

## Usage

The `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.org/docs/components/table).
When using the component, pass in the `fields` prop as part of the `$options`, and give each table
data and table head its own styles if necessary.

## Internationalization

To ensure we internationalize field labels, always pass an array of objects for the `fields` prop,
like mentioned in the implementation example.

[Learn more about the `field` prop](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/2e88af62966265cb725ca3f65f4b175e2494734b/packages/gitlab-ui/src/vendor/bootstrap-vue/src/components/table/README.md#L137).

## Header text alignment

To align a given `TH` element's text to the right, set the `thAlignRight` property to `true` in
the fields definition. This will ensure that proper styling is applied, including when the column
is sortable.

```js
const fields = [
  {
    key: "column_one",
    label: __("First column"),
    sortable: true,
    thAlignRight: true,
  },
];
```

## Use `GlTableLite` when possible

If you don't need all the features of `GlTable`, like filtering, sorting, or
pagination, use `GlTableLite` which offers a subset of `GlTable` features.

## Implementation Example

```html
<script>
  export default {
    fields: [
      {
        key: 'column_one',
        label: __('First column'),
        thClass: 'w-60p',
        tdClass: 'table-col d-flex'
      },
      {
        key: 'col_2',
        label: __('Second column'),
        thClass: 'w-15p',
        tdClass: 'table-col d-flex'
      },
    ];
  }
</script>
<template>
  <gl-table :items="items" :fields="$options.fields">
    <template #head(column_one)>
      <div>First column</div>
      <!-- This is the column head for the first object in `fields` -->
    </template>

    <template #cell(column_one)>
      This is the template for column data belonging to the first object
    </template>
  </gl-table>
</template>
```