> ## Documentation Index
> Fetch the complete documentation index at: https://docs.velure.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Tables

> Table.vue Component Documentation

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:

<CardGroup cols={2}>
  <Card title="Headers" icon="square-1">
    Define headers for table columns for clear structure and labeling.
  </Card>

  <Card title="Rows" icon="square-2">
    Populate the table with dynamic rows based on the provided data.
  </Card>

  <Card title="Checkbox Elements" icon="square-3">
    Include checkbox elements for selecting rows or performing bulk actions.
  </Card>

  <Card title="Sorting Indicators" icon="square-4">
    Display sorting indicators to show the current sort order of the table.
  </Card>
</CardGroup>

***

## Props

<ParamField path="columns" type="array" required="true">
  Defines the columns of the table. Each column object should include at least a `header` and optionally a `field` and additional properties.
</ParamField>

<ParamField path="rows" type="array" required="true">
  Defines the rows of the table. Each row is an object containing data corresponding to the fields defined in the columns.
</ParamField>

<ParamField path="box" type="boolean">
  Enables box styling for the component.
</ParamField>

<ParamField path="compact" type="boolean">
  Enables a compact mode for the component.
</ParamField>

<ParamField path="overflow" type="boolean">
  Allows content to overflow its container.
</ParamField>

<ParamField path="sticky" type="boolean">
  Makes the component stick to its position when scrolling. (does not work with overflow)
</ParamField>

***

## Slots

<ParamField path="checkboxHead" type="slot" scope="{}">
  Slot for rendering the checkbox header. `<template #checkboxHead="{}"></template>`
</ParamField>

<ParamField path="checkboxCell" type="slot" scope="{ row, rowIndex, colIndex }">
  Slot for rendering checkboxes in table cells. `<template #checkboxCell="{ row, rowIndex, colIndex }"></template>`
</ParamField>

<ParamField path="head" type="slot" scope="{ column, field }">
  Slot for rendering custom content in the table header. `<template #head="{ column, field }"></template>`
</ParamField>

<ParamField path="headSort" type="slot" scope="{ column, field }">
  Slot for rendering sorting controls in the header. `<template #headSort="{ column, field }"></template>`
</ParamField>

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

***

## Usage

### Basic Table Example

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

```js theme={null}
import { Table, InputCheckbox } from '@robojuice/velure-ui';
import { IconExpandUpDown } from '@robojuice/velure-ui/src/icons';
```

```vue theme={null}
<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:

```javascript theme={null}
[
  { 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:

```javascript theme={null}
[
  { name: 'John Doe', age: 30 },
  { name: 'Jane Smith', age: 25 },
  { name: 'Alice Johnson', age: 35 }
]
```

***

## Customization via Slots

### Custom Checkbox

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

### Custom Header with Sorting

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

### Custom Cell Content

```vue theme={null}
<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.