Table

A data table with sortable columns, density options, and striped rows. Columns and data are set via JavaScript properties.

Playground

Controls

Density

Responsive Mode

Hoverable

Striped

Bordered

Loading

Empty Message

Label

Row Key

Sort

Theme

HTMLReact

ShareCopy

Usage

<lt-table id="my-table" hoverable striped></lt-table>

<script type="module">
const table = document.getElementById('my-table');
table.columns = [
  { key: 'name',   label: 'Name',   sortable: true },
  { key: 'role',   label: 'Role' },
  { key: 'status', label: 'Status' },
];
table.data = [
  { name: 'Alice',   role: 'Engineer', status: 'Active' },
  { name: 'Bob',     role: 'Designer', status: 'Active' },
  { name: 'Charlie', role: 'Manager',  status: 'Away' },
];
</script>

import { Table } from '@latty-ds/react';

const columns = [
{ key: 'name', label: 'Name', sortable: true },
{ key: 'role', label: 'Role' },
{ key: 'status', label: 'Status' },
];

const data = [
{ name: 'Alice', role: 'Engineer', status: 'Active' },
{ name: 'Bob', role: 'Designer', status: 'Active' },
{ name: 'Charlie', role: 'Manager', status: 'Away' },
];

<Table columns={columns} data={data} hoverable striped />

<script setup lang="ts">
const columns = [
{ key: 'name', label: 'Name', sortable: true },
{ key: 'role', label: 'Role' },
{ key: 'status', label: 'Status' },
]

const data = [
{ name: 'Alice', role: 'Engineer', status: 'Active' },
{ name: 'Bob', role: 'Designer', status: 'Active' },
{ name: 'Charlie', role: 'Manager', status: 'Away' },
]
</script>

<template>
<lt-table :columns="columns" :data="data" hoverable striped></lt-table>
</template>

API