DataTable

Data

An enhanced table with built-in column sorting, full-text search, and pagination.

Props

Prop	Type	Default	Description
`columns`*	`DataTableColumn[]`	`–`	Column definitions: { key, label, sortable?, align?, format? }
`rows`*	`Record<string, unknown>[]`	`–`	Data rows.
`searchable`	`boolean`	`true`	Show search bar.
`striped`	`boolean`	`false`	Alternating row colors.
`compact`	`boolean`	`false`	Reduced row padding.
`perPage`	`number`	`10`	Rows per page.

Examples

With search and sort

NameAlice Martin

RoleEngineer

StatusActive

Joined2024-01-15

NameBob Dupont

RoleDesigner

StatusActive

Joined2023-11-02

NameClaire Morel

RolePM

StatusInactive

Joined2024-03-20

NameDavid Chen

RoleEngineer

StatusActive

Joined2024-06-10

NameElena Rossi

RoleDesigner

StatusActive

Joined2023-09-05

Name	Role	Status	Joined
Alice Martin	Engineer	Active	2024-01-15
Bob Dupont	Designer	Active	2023-11-02
Claire Morel	PM	Inactive	2024-03-20
David Chen	Engineer	Active	2024-06-10
Elena Rossi	Designer	Active	2023-09-05

Showing 1-5 of 7

vue

<script setup>
const columns = [
  { key: 'name', label: 'Name', sortable: true },
  { key: 'role', label: 'Role', sortable: true },
  { key: 'status', label: 'Status' },
  { key: 'joined', label: 'Joined', sortable: true },
]
const rows = [
  { name: 'Alice Martin', role: 'Engineer', status: 'Active', joined: '2024-01-15' },
  { name: 'Bob Dupont', role: 'Designer', status: 'Active', joined: '2023-11-02' },
  { name: 'Claire Morel', role: 'PM', status: 'Inactive', joined: '2024-03-20' },
]
</script>
<template>
  <DsDataTable :columns="columns" :rows="rows" :searchable="true" :striped="false" :per-page="10" />
</template>

Striped + compact

NameAlice Martin

RoleEngineer

StatusActive

Joined2024-01-15

NameBob Dupont

RoleDesigner

StatusActive

Joined2023-11-02

NameClaire Morel

RolePM

StatusInactive

Joined2024-03-20

NameDavid Chen

RoleEngineer

StatusActive

Joined2024-06-10

NameElena Rossi

RoleDesigner

StatusActive

Joined2023-09-05

Name	Role	Status	Joined
Alice Martin	Engineer	Active	2024-01-15
Bob Dupont	Designer	Active	2023-11-02
Claire Morel	PM	Inactive	2024-03-20
David Chen	Engineer	Active	2024-06-10
Elena Rossi	Designer	Active	2023-09-05

Showing 1-5 of 7

vue

<script setup>
const columns = [
  { key: 'name', label: 'Name', sortable: true },
  { key: 'role', label: 'Role', sortable: true },
  { key: 'status', label: 'Status' },
  { key: 'joined', label: 'Joined', sortable: true },
]
const rows = [
  { name: 'Alice Martin', role: 'Engineer', status: 'Active', joined: '2024-01-15' },
  { name: 'Bob Dupont', role: 'Designer', status: 'Active', joined: '2023-11-02' },
  { name: 'Claire Morel', role: 'PM', status: 'Inactive', joined: '2024-03-20' },
]
</script>
<template>
  <DsDataTable :columns="columns" :rows="rows" :searchable="true" :striped="false" :per-page="10" />
</template>

Skeleton

Use DsDataTableSkeleton as a loading placeholder while content is being fetched.

Default (5 rows)

vue

<DsDataTableSkeleton
  :rows="5"
  :columns="4"
/>

Compact (3 rows)

vue

<DsDataTableSkeleton
  :rows="3"
  :columns="3"
/>

Accessibility

Proper <table> semantics with <th> and <td>.
Sort buttons have clear visual direction indicators.

Calendar

Kanban