server.zip

# Tables > For displaying tabular data, `<b-table>` supports pagination, filtering, sorting, custom > rendering, various style options, events, and asynchronous data. For simple display of tabular > data without all the fancy features, BootstrapVue provides two lightweight alternative components > [`<b-table-lite>`](#light-weight-tables) and [`<b-table-simple>`](#simple-tables). **Example: Basic usage** ```html <template> <div> <b-table striped hover :items="items"></b-table> </div> </template> <script> export default { data() { return { items: [ { age: 40, first_name: 'Dickerson', last_name: 'Macdonald' }, { age: 21, first_name: 'Larsen', last_name: 'Shaw' }, { age: 89, first_name: 'Geneva', last_name: 'Wilson' }, { age: 38, first_name: 'Jami', last_name: 'Carney' } ] } } } </script> <!-- b-table.vue --> ``` ## Items (record data) `items` is the table data in array format, where each record (row) data are keyed objects. Example format: <!-- eslint-disable no-unused-vars --> ```js const items = [ { age: 32, first_name: 'Cyndi' }, { age: 27, first_name: 'Havij' }, { age: 42, first_name: 'Robert' } ] ``` `<b-table>` automatically samples the first row to extract field names (the keys in the record data). Field names are automatically "humanized" by converting `kebab-case`, `snake_case`, and `camelCase` to individual words and capitalizes each word. Example conversions: - `first_name` becomes `First Name` - `last-name` becomes `Last Name` - `age` becomes `Age` - `YEAR` remains `YEAR` - `isActive` becomes `Is Active` These titles will be displayed in the table header, in the order they appear in the **first** record of data. See the [Fields](#fields-column-definitions) section below for customizing how field headings appear. **Note:** Field order is not guaranteed. Fields will typically appear in the order they were defined in the first row, but this may not always be the case depending on the version of browser in use. See section [Fields (column definitions)](#fields-column-definitions) below to see how to guarantee the order of fields, and to override the headings generated. Record data may also have additional special reserved name keys for colorizing rows and individual cells (variants), and for triggering additional row detail. The supported optional item record modifier properties (make sure your field keys do not conflict with these names): | Property | Type | Description | | --------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `_cellVariants` | Object | Bootstrap contextual state applied to individual cells. Keyed by field (See the [Color Variants](/docs/reference/color-variants) for supported values). These variants map to classes `table-${variant}` or `bg-${variant}` (when the `dark` prop is set). | | `_rowVariant` | String | Bootstrap contextual state applied to the entire row (See the [Color Variants](/docs/reference/color-variants) for supported values). These variants map to classes `table-${variant}` or `bg-${variant}` (when the `dark` prop is set) | | `_showDetails` | Boolean | Used to trigger the display of the `row-details` scoped slot. See section [Row details support](#row-details-support) below for additional information | **Example: Using variants for table cells** ```html <template> <div> <b-table hover :items="items"></b-table> </div> </template> <script> export default { data() { return { items: [ { age: 40, first_name: 'Dickerson', last_name: 'Macdonald' }, { age: 21, first_name: 'Larsen', last_name: 'Shaw' }, { age: 89, first_name: 'Geneva', last_name: 'Wilson', _rowVariant: 'danger' }, { age: 40, first_name: 'Thor', last_name: 'MacDonald', _cellVariants: { age: 'info', first_name: 'warning' } }, { age: 29, first_name: 'Dick', last_name: 'Dunlap' } ] } } } </script> <!-- b-table-variants.vue --> ``` `items` can also be a reference to a _provider_ function, which returns an `Array` of items data. Provider functions can also be asynchronous: - By returning `null` (or `undefined`) and calling a callback, when the data is ready, with the data array as the only argument to the callback, - By returning a `Promise` that resolves to an array. See the ["Using Items Provider functions"](#using-items-provider-functions) section below for more details. ### Table item notes and warnings - Avoid manipulating record data in place, as changes to the underlying items data will cause either the row or entire table to be re-rendered. See [Primary Key](#primary-key), below, for ways to minimize Vue's re-rendering of rows. - `items` array records should be a simple object and **must** avoid placing data that may have circular references in the values within a row. `<b-table>` serializes the row data into strings for sorting and filtering, and circular references will cause stack overflows to occur and your app to crash! ## Fields (column definitions) The `fields` prop is used to customize the table columns headings, and in which order the columns of data are displayed. The field object keys (i.e. `age` or `first_name` as shown below) are used to extract the value from each item (record) row, and to provide additional features such as enabling [sorting](#sorting) on the column, etc. Fields can be provided as a _simple array_ or an _array of objects_. **Internally the fields data will be normalized into the _array of objects_ format**. Events or slots that include the column `field` data will be in the normalized field object format (array of objects for `fields`, or an object for an individual `field`). ### Fields as a simple array Fields can be a simple array, for defining the order of the columns, and which columns to display: **Example: Using `array` fields definition** ```html <template> <div> <b-table striped hover :items="items" :fields="fields"></b-table> </div> </template> <script> export default { data() { return { // Note `isActive` is left out and will not appear in the rendered table fields: ['first_name', 'last_name', 'age'], items: [ { isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' }, { isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw' }, { isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson' }, { isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' } ] } } } </script> <!-- b-table-fields-array.vue --> ``` ### Fields as an array of objects Fields can be a an array of objects, providing additional control over the fields (such as sorting, formatting, etc.). Only columns (keys) that appear in the fields array will be shown: **Example: Using array of objects fields definition** ```html <template> <div> <b-table striped hover :items="items" :fields="fields"></b-table> </div> </template> <script> export default { data() { return { // Note 'isActive' is left out and will not appear in the rendered table fields: [ { key: 'last_name', sortable: true }