pages._explore-components-presentational-table.title

pages._explore.sections.basic-usage.title

ID	Name	Age
1	John Doe	30
2	Jane Smith	25
3	Bob Johnson	35

html

<Table 
    :data="basicData"
    :columns="basicColumns"
/>

typescript

<script setup lang="ts">

// state
const basicData = ref([
  { id: 1, name: 'John Doe', age: 30 },
  { id: 2, name: 'Jane Smith', age: 25 },
  { id: 3, name: 'Bob Johnson', age: 35 }
])

const basicColumns = ref([
  { key: 'id', label: 'ID' },
  { key: 'name', label: 'Name' },
  { key: 'age', label: 'Age' }
])
</script>

pages._explore.sections.complex-usage.title

ID	Name	Email	Role	Status
1	John Doe	john@example.com	Admin	Active
2	Jane Smith	jane@example.com	User	Active
3	Bob Johnson	bob@example.com	User	Inactive

html

<Table 
    :data="complexData"
    :columns="complexColumns"
    :sticky-header="true"
    :selectable="true"
    max-height="300px"
/>

typescript

<script setup lang="ts">

// state
const complexData = ref([
  { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin', status: 'Active' },
  { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User', status: 'Active' },
  { id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'User', status: 'Inactive' }
])

const complexColumns = ref([
  { key: 'id', label: 'ID', columnCellClasses: 'w-16' },
  { key: 'name', label: 'Name', sortable: true },
  { key: 'email', label: 'Email', sortable: true },
  { key: 'role', label: 'Role', align: 'center' },
  { key: 'status', label: 'Status', align: 'right' }
])
</script>

Sortable Table

Product	Price	Stock
Laptop	999	15
Mouse	25	100
Keyboard	75	50

html

<Table 
    :data="sortableData"
    :columns="sortableColumns"
    @sort="fnHandleSort"
/>

typescript

<script setup lang="ts">

// state
const sortableData = ref([
  { product: 'Laptop', price: 999, stock: 15 },
  { product: 'Mouse', price: 25, stock: 100 },
  { product: 'Keyboard', price: 75, stock: 50 }
])

const sortableColumns = ref([
  { key: 'product', label: 'Product', sortable: true },
  { key: 'price', label: 'Price', sortable: true, align: 'right' },
  { key: 'stock', label: 'Stock', sortable: true, align: 'center' }
])

// methods
const fnHandleSort = (sortInfo) => {
  console.log('Sorting by:', sortInfo.column, sortInfo.order)
}
</script>

Table Features

Empty state:

Name	Value

No data available

Loading state:

Name	Value
Item 1	Value 1

Custom cell styling:

Priority	Task
High	Complete project
Medium	Review code
Low	Update docs

html

<!-- Empty state -->
<Table 
    :data="[]"
    :columns="emptyColumns"
/>

<!-- Loading state -->
<Table 
    :data="loadingData"
    :columns="loadingColumns"
    :loading="true"
/>

<!-- Custom cell classes -->
<Table 
    :data="styledData"
    :columns="styledColumns"
/>

typescript

<script setup lang="ts">

// state
const emptyColumns = ref([
  { key: 'name', label: 'Name' },
  { key: 'value', label: 'Value' }
])

const loadingData = ref([
  { name: 'Item 1', value: 'Value 1' }
])

const loadingColumns = ref([
  { key: 'name', label: 'Name' },
  { key: 'value', label: 'Value' }
])

const styledData = ref([
  { priority: 'High', task: 'Complete project' },
  { priority: 'Medium', task: 'Review code' },
  { priority: 'Low', task: 'Update docs' }
])

const styledColumns = ref([
  { 
    key: 'priority', 
    label: 'Priority', 
    columnCellClasses: 'w-24',
    cellClasses: 'font-semibold'
  },
  { key: 'task', label: 'Task' }
])
</script>

pages._explore.sections.props.title

Prop	Default	Type
data	[]	TableData[]
columns	[]	TableColumn[]
maxHeight	undefined	string
stickyHeader	false	boolean
rowClasses	undefined	string
selectable	false	boolean
loading	false	boolean

pages._explore.sections.types.title

Name	Type	Options
TableData	interface	Object with string keys and string\|number values
TableColumn	interface	Column configuration object
TableSortInfo	interface	Sort information with column and order
TableSortOrder	type	Union type: "asc" \| "desc"
TableSortOrderOptions	enum	ASC = "asc", DESC = "desc"

pages._explore.sections.emits.title

Event	Type
sort
row-click

pages._explore.sections.slots.title

Slot	Type
cell-{columnKey}	Scoped slot for custom cell content. Provides row, value, column, index
empty	Custom empty state content
loading	Custom loading state content