Skip to content
On this page

<Table />

Rankable, sortable, and filterable table.

Usage

vue
<script setup lang="ts">
import { Table } from '@screaming/tables'
</script>

<template>
  <Table />
</template>
1
2
3
4
5
6
7

Example

vue
<script setup lang="ts">
import { Table, createClasses, createColumn, createConfig } from '@screaming/tables'
import data from '~/assets/data.json'

const classes = createClasses({ ... })

const config = createConfig({ ... })

const columns = [
  createColumn('...', { ... }),
  createColumn('...', { ... }),
  createColumn('...', { ... })
]
</script>

<template>
  <Table :data="data" :columns="columns" :config="config" :classes="classes" init-key="..." />
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Props

NameTypeDefaultDescription
dataarrayThe data to display in the table.
columnsarrayThe table's column definitions.
configobjectThe table's configuration.
initKeystringThe initial key to rank the data by.
classesobject{}Class definitions for the table's elements.
headlessbooleanfalseWhether or not to render the <thead>.
lengthnumberdata.lengthHow many rows to display in the table.
filter[string,string][]Key-value pairing for filtering table data.