Tables

The Table.vue component provides a flexible and dynamic way to render tabular data in Vue. It supports custom slots for headers, cells, checkboxes, and sorting elements, allowing developers to fully customize the table’s functionality and presentation.

Overview

The Table component accepts columns and rows as props to define the structure and content of the table. Slots are provided for extending and customizing various parts of the table, including:

Headers

Define headers for table columns for clear structure and labeling.

Rows

Populate the table with dynamic rows based on the provided data.

Checkbox Elements

Include checkbox elements for selecting rows or performing bulk actions.

Sorting Indicators

Display sorting indicators to show the current sort order of the table.

Props

array

required

Defines the columns of the table. Each column object should include at least a header and optionally a field and additional properties.

array

required

Defines the rows of the table. Each row is an object containing data corresponding to the fields defined in the columns.

boolean

Enables box styling for the component.

boolean

Enables a compact mode for the component.

boolean

Allows content to overflow its container.

boolean

Makes the component stick to its position when scrolling. (does not work with overflow)

Slots

slot

Slot for rendering the checkbox header. <template #checkboxHead="{}"></template>

slot

Slot for rendering checkboxes in table cells. <template #checkboxCell="{ row, rowIndex, colIndex }"></template>

slot

Slot for rendering custom content in the table header. <template #head="{ column, field }"></template>

slot

Slot for rendering sorting controls in the header. <template #headSort="{ column, field }"></template>

slot

Slot for rendering custom content in table cells. <template #cell="{ row, rowIndex, colIndex, field, column }"></template>

Usage

Basic Table Example

Here’s an example of how to implement the Table component with dynamic data and custom slots:

import { Table, InputCheckbox } from '@robojuice/velure-ui';
import { IconExpandUpDown } from '@robojuice/velure-ui/src/icons';

<Table :columns="tableData.tableColumns" :rows="tableData.tableRows">

  <!-- Checkbox Header -->
  <template #checkboxHead="{ row }">
    <InputCheckbox partial />
  </template>

  <!-- Checkbox Cell -->
  <template #checkboxCell="{ row, rowIndex }">
    <InputCheckbox :checked="row.selected" />
  </template>

  <!-- Custom Header -->
  <template #head="{ column, field }">
    {{ field }}
  </template>

  <!-- Sorting Controls -->
  <template #headSort="{ column, field }">
    <IconExpandUpDown name="ExpandUpDownLine" class="text-gray-400" size="16" />
  </template>

  <!-- Custom Cell -->
  <template #cell="{ row, rowIndex, column, colIndex, field }">
    <div class="flex flex-col gap-1">
      <div class="font-bold">{{ field }}</div>
      <p>Some content in the cell.</p>
    </div>
  </template>

</Table>

Columns and Rows Data Format

Columns

The columns prop should be an array of objects. Each column object can include:

Property	Type	Required	Description
`header`	`String`	`true`	The display name for the column header.
`field`	`String`	`false`	The key in the `rows` data that corresponds to this column.
`class`	`String`	`false`	Optional class for custom styling of the column.

Example:

[
  { header: 'Name', field: 'name', class: 'text-left' },
  { header: 'Age', field: 'age', class: 'text-center' },
  { header: 'Actions', class: 'text-right' }
]

Rows

The rows prop should be an array of objects, where each object represents a row. The keys in each row object should match the field values in the columns array. Example:

[
  { name: 'John Doe', age: 30 },
  { name: 'Jane Smith', age: 25 },
  { name: 'Alice Johnson', age: 35 }
]

Customization via Slots

Custom Checkbox

<template #checkboxCell="{ row, rowIndex }">
  <InputCheckbox :checked="row.selected" />
</template>

Custom Header with Sorting

<template #headSort="{ column, field }">
  <IconExpandUpDown class="text-gray-400" size="16" />
</template>

Custom Cell Content

<template #cell="{ row, rowIndex, column, colIndex, field  }">
  <div>
    <strong>{{ field }}</strong>
  </div>
</template>

Notes

Dynamic Data: Ensure the rows prop data corresponds to the fields defined in the columns prop.
Custom Slots: Utilize slots for advanced customization of table behavior, such as sorting, filtering, or adding interactive elements.
Responsive Design: The table structure supports scrollable content for better handling of wide datasets.

Setup

Foundations

Inputs

Overview

Headers

Rows

Checkbox Elements

Sorting Indicators

Props

Slots

Usage

Basic Table Example

Columns and Rows Data Format

Columns

Rows

Customization via Slots

Custom Checkbox

Custom Header with Sorting

Custom Cell Content

Notes

​Overview

Headers

Rows

Checkbox Elements

Sorting Indicators

​Props

​Slots

​Usage

​Basic Table Example

​Columns and Rows Data Format

​Columns

​Rows

​Customization via Slots

​Custom Checkbox

​Custom Header with Sorting

​Custom Cell Content

​Notes

Overview

Props

Slots

Usage

Basic Table Example

Columns and Rows Data Format

Columns

Rows

Customization via Slots

Custom Checkbox

Custom Header with Sorting

Custom Cell Content

Notes