Table

A table component for displaying rows of data.

Basic Usage

Name	Age	Address
John Brown	32	New York No. 1 Lake Park
Jim Green	42	London No. 1 Lake Park
Joe Black	32	Sidney No. 1 Lake Park

With Stripe and Border

Name	Age	Address
John Brown	32	New York No. 1 Lake Park
Jim Green	42	London No. 1 Lake Park
Joe Black	32	Sidney No. 1 Lake Park

<template>
  <Column :gap="20">
    <Table :columns="columns" :dataSource="data" />
    <Text>With Stripe and Border</Text>
    <Table :columns="columns" :dataSource="data" stripe border />
  </Column>
</template>

<script setup lang="ts">
import { Table, Column, Text } from "fluekit";

const columns = [
  { title: "Name", key: "name", width: 150 },
  { title: "Age", key: "age", width: 100, align: "center" },
  { title: "Address", key: "address" },
];

const data = [
  { name: "John Brown", age: 32, address: "New York No. 1 Lake Park" },
  { name: "Jim Green", age: 42, address: "London No. 1 Lake Park" },
  { name: "Joe Black", age: 32, address: "Sidney No. 1 Lake Park" },
];
</script>

API

Table Props

Property	Type	Default	Description
columns	TableColumn[]	[]	Columns configuration
dataSource	any[]	[]	Data array
rowKey	string | ((row: any) => string | number)	-	Row key
border	boolean	true	Whether to show border
stripe	boolean	false	Whether to show stripe
fixed	boolean	false	Whether to use fixed table layout
showHeader	boolean	true	Whether to show header
width	number | string	-	Container width
height	number | string	-	Container height
margin	EdgeInsets	-	Container margin
padding	EdgeInsets	-	Container padding
decoration	BoxDecoration	-	Container decoration

TableColumn

Property	Type	Description
title	string	Column title
key	string	Column key
width	number | string	Column width
align	'left' | 'center' | 'right'	Column alignment

Slots

Name	Description
header	Custom header cell content. Scope: { column }
[key]	Custom cell content. Scope: { record, index }
empty	Custom empty content

Events

Name	Description
rowClick	Triggers when a row is clicked. Callback: (row: any, index: number)