Skip to main content
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

​
columns
array
required
Defines the columns of the table. Each column object should include at least a header and optionally a field and additional properties.
​
rows
array
required
Defines the rows of the table. Each row is an object containing data corresponding to the fields defined in the columns.
​
box
boolean
Enables box styling for the component.
​
compact
boolean
Enables a compact mode for the component.
​
overflow
boolean
Allows content to overflow its container.
​
sticky
boolean
Makes the component stick to its position when scrolling. (does not work with overflow)

​
Slots

​
checkboxHead
slot
Slot for rendering the checkbox header. <template #checkboxHead="{}"></template>
​
checkboxCell
slot
Slot for rendering checkboxes in table cells. <template #checkboxCell="{ row, rowIndex, colIndex }"></template>
​
head
slot
Slot for rendering custom content in the table header. <template #head="{ column, field }"></template>
​
headSort
slot
Slot for rendering sorting controls in the header. <template #headSort="{ column, field }"></template>
​
cell
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:
PropertyTypeRequiredDescription
headerStringtrueThe display name for the column header.
fieldStringfalseThe key in the rows data that corresponds to this column.
classStringfalseOptional 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.