Basic Usage

Name	Gender
Jason	male
Lucy	female

<script setup>
import { ref } from 'vue'
const tableData = [
  { name: 'Jason', gender: 'male' },
  { name: 'Lucy', gender: 'female' },
]

const tableColumns = [
  { title: 'Name', field: 'name' },
  { title: 'Gender', field: 'gender' },
]
</script>

<template>
  <c-table
    row-key="name"
    :data="tableData"
    :columns="tableColumns"
  />
</template>

Click to open/fold code

Open Vue Repl Editor

Customize Header

Name	Gender
Jason	male
Lucy	female

<script setup>
const tableData = [
  { name: 'Jason', gender: 'male' },
  { name: 'Lucy', gender: 'female' },
]

const tableColumns = [
  { title: 'Name', field: 'name' },
  { title: 'Gender', field: 'gender' },
]
</script>

<template>
  <c-table row-key="name" :data="tableData" :columns="tableColumns">
    <template #th-name="{ title }">
      <span style="color: purple; font-size: 58px">
        {{ title }}
      </span>
    </template>
  </c-table>
</template>

Click to open/fold code

Open Vue Repl Editor

Customize Column

Name	Gender	Operations
Jason	male
Lucy	female

<script setup>
const tableData = [
  { name: 'Jason', gender: 'male' },
  { name: 'Lucy', gender: 'female' },
]

const tableColumns = [
  { title: 'Name', field: 'name' },
  { title: 'Gender', field: 'gender' },
  { title: 'Operations', field: 'operations' },
]
</script>

<template>
  <c-table row-key="name" :data="tableData" :columns="tableColumns">
    <template #td-operations>
      <c-button label="Edit" round size="sm" />
      <c-button label="Delete" round theme="negative" size="sm" />
    </template>
  </c-table>
</template>

Click to open/fold code

Open Vue Repl Editor

CTable API

Props

Slots

striped

boolean

Default  false

Determine the table has striped style or not.

columns

Array<TableColumn>

Default  () => []

The columns config.

data

Array<Record<string, string | number>>

Default  () => []

The table data.

rowKey

string

Default  'id'

The unique key of row.