---
type: doc
title: Table
description: Native Liquid table with readable CSS and shared data-slot parts.
---

> Native Liquid and CSS. Install from `https://ui.full.dev/r/liquid/{name}.json`; see [layout setup](/liquid/docs/installation.md). No Tailwind or consuming build.

```liquid title="liquid/examples/table.liquid"
<table data-slot='table'>
  <caption data-slot='table-caption'>
    Example data
  </caption>
  <thead data-slot='table-header'>
    <tr data-slot='table-row'>
      <th data-slot='table-head' scope='col'>Item</th>
      <th data-slot='table-head' scope='col'>Quantity</th>
      <th data-slot='table-head' scope='col'>Price</th>
    </tr>
  </thead>
  <tbody data-slot='table-body'>
    <tr data-slot='table-row'>
      <td data-slot='table-cell'>Example 1</td>
      <td data-slot='table-cell'>1</td>
      <td data-slot='table-cell'>1000</td>
    </tr>

    <tr data-slot='table-row'>
      <td data-slot='table-cell'>Example 2</td>
      <td data-slot='table-cell'>2</td>
      <td data-slot='table-cell'>2000</td>
    </tr>

    <tr data-slot='table-row'>
      <td data-slot='table-cell'>Example 3</td>
      <td data-slot='table-cell'>3</td>
      <td data-slot='table-cell'>3000</td>
    </tr>
  </tbody>
  <tfoot data-slot='table-footer'>
    <tr data-slot='table-row'>
      <td data-slot='table-cell' colspan='2'>Total</td>
      <td data-slot='table-cell'>14000</td>
    </tr>
  </tfoot>
</table>
```

## Installation

```bash
npx shadcn@latest add https://ui.full.dev/r/liquid/table.json
```

Follow the [one-time layout setup](/liquid/docs/installation/). A full `components` install already includes this item.

## Usage

After this install, render these once in the layout head before theme overrides and other modules. The full `ui` hook already includes them. The command also installs the parts used in this example.

```liquid
{% render 'ui-init' %}
{% render 'ui-table' %}
```

The preview and its Usage tab render the same native Liquid source. Use `data-slot` for parts, `data-variant` for variants and `data-size` for sizes. Keep your store's labels, translations and Shopify data in your theme.

## Parts

`checkbox`, `table`, `table-body`, `table-caption`, `table-cell`, `table-container`, `table-footer`, `table-head`, `table-header`, `table-row`.

[Component source](https://github.com/fulldotdev/ui/tree/main/liquid/components/table.liquid) · [Theming](/liquid/docs/theming/)

## Install what this page shows

```bash
npx shadcn@latest add https://ui.full.dev/r/liquid/table.json
```