Table

Basic usage

Name Description
Apple Apple is red
Banana Banana is yellow
Grapes Grapes is purple 
<script lang="ts">
  const columns = [
    {
      title: 'Name',
      field: 'name',
      width: '200px',
    },
    {
      title: 'Description',
      field: 'description',
    },
  ]

  const fruits = [
    { name: 'Apple', description: 'Apple is red' },
    { name: 'Banana', description: 'Banana is yellow' },
    { name: 'Grapes', description: 'Grapes is purple' },
  ]
</script>

<CTable data={fruits} {columns} />
<script lang="ts">
  const columns = [
    {
      title: 'Name',
      field: 'name',
      width: '200px',
    },
    {
      title: 'Description',
      field: 'description',
    },
  ]

  const fruits = [
    { name: 'Apple', description: 'Apple is red' },
    { name: 'Banana', description: 'Banana is yellow' },
    { name: 'Grapes', description: 'Grapes is purple' },
  ]
</script>

<CTable data={fruits} {columns} />
svelte
Click fold/expand code

Striped

Name Description
Apple Apple is red
Banana Banana is yellow
Grapes Grapes is purple
Peach Peach is pink 
<script lang="ts">
  const columns = [
    {
      title: 'Name',
      field: 'name',
      width: '200px',
    },
    {
      title: 'Description',
      field: 'description',
    },
  ]

  const fruits = [
    { name: 'Apple', description: 'Apple is red' },
    { name: 'Banana', description: 'Banana is yellow' },
    { name: 'Grapes', description: 'Grapes is purple' },
    { name: 'Peach', description: 'Peach is pink' }
  ]
</script>

<CTable data={fruits} {columns} striped />
<script lang="ts">
  const columns = [
    {
      title: 'Name',
      field: 'name',
      width: '200px',
    },
    {
      title: 'Description',
      field: 'description',
    },
  ]

  const fruits = [
    { name: 'Apple', description: 'Apple is red' },
    { name: 'Banana', description: 'Banana is yellow' },
    { name: 'Grapes', description: 'Grapes is purple' },
    { name: 'Peach', description: 'Peach is pink' }
  ]
</script>

<CTable data={fruits} {columns} striped />
svelte
Click fold/expand code

Custom column

A custom column component can hold these props:

  • col: The column config
  • row: The row data
  • rowIdex: The row index number (from 0).
<!-- CustomColumn.svelte -->
<script lang="ts">
  export let row: {
    name: string
  }

  $$restProps
</script>

<div class="text-10">
  {#if row.name === 'Apple'}
    <div class="i-openmoji-red-apple"></div>
  {:else if row.name === 'Banana'}
    <div class="i-openmoji-banana"></div>
  {:else}
    <div class="i-openmoji-grapes"></div>
  {/if}
</div>

<!-- CustomColumn.svelte -->
<script lang="ts">
  export let row: {
    name: string
  }

  $$restProps
</script>

<div class="text-10">
  {#if row.name === 'Apple'}
    <div class="i-openmoji-red-apple"></div>
  {:else if row.name === 'Banana'}
    <div class="i-openmoji-banana"></div>
  {:else}
    <div class="i-openmoji-grapes"></div>
  {/if}
</div>
svelte

Custom title

A custom title component can hold these props:

  • col: The column config
<!-- CustomTitle.svelte -->
<div class="text-xl text-blue-5 dark:text-orange-5">Name</div>

<!-- CustomTitle.svelte -->
<div class="text-xl text-blue-5 dark:text-orange-5">Name</div>
svelte

Sticky columns

Icon Name Color Shape Description
Apple red circle Apple is red
Banana yellow long Banana is yellow
Grapes purple many circles Grapes is purple 
<script>
  import CustomColumn from '/src/routes/features/components/data-presentation/table/CustomColumn.svelte'

  const columns = [
    {
      title: 'Icon',
      field: 'icon',
      cell: CustomColumn,
      sticky: 'left',
      width: '100px'
    },
    {
      title: 'Name',
      field: 'name',
      width: '100px',
      sticky: 'left',
    },
    {
      title: 'Color',
      field: 'color',
      width: '300px',
    },
    {
      title: 'Shape',
      field: 'shape',
      width: '300px'
    },
    {
      title: 'Description',
      field: 'description',
      width: '200px',
      sticky: 'right',
    },
  ]

  const fruits = [
    { name: 'Apple', color: 'red', shape: 'circle', description: 'Apple is red' },
    { name: 'Banana', color: 'yellow', shape: 'long', description: 'Banana is yellow' },
    { name: 'Grapes', color: 'purple', shape: 'many circles', description: 'Grapes is purple' },
  ]
</script>

<CTable data={fruits} {columns} />
<script>
  import CustomColumn from '/src/routes/features/components/data-presentation/table/CustomColumn.svelte'

  const columns = [
    {
      title: 'Icon',
      field: 'icon',
      cell: CustomColumn,
      sticky: 'left',
      width: '100px'
    },
    {
      title: 'Name',
      field: 'name',
      width: '100px',
      sticky: 'left',
    },
    {
      title: 'Color',
      field: 'color',
      width: '300px',
    },
    {
      title: 'Shape',
      field: 'shape',
      width: '300px'
    },
    {
      title: 'Description',
      field: 'description',
      width: '200px',
      sticky: 'right',
    },
  ]

  const fruits = [
    { name: 'Apple', color: 'red', shape: 'circle', description: 'Apple is red' },
    { name: 'Banana', color: 'yellow', shape: 'long', description: 'Banana is yellow' },
    { name: 'Grapes', color: 'purple', shape: 'many circles', description: 'Grapes is purple' },
  ]
</script>

<CTable data={fruits} {columns} />
svelte
Click fold/expand code

Column type definition

import type { ComponentType } from 'svelte'

export interface Column {
  /**
   * The field of row data
   */
  field: string
  /**
   * The column width
   */
  width?: string
  /**
   * The title content. Can be a svelte component
   */
  title?: string | ComponentType
  /**
   * Customize the cell content with svelte component
   */
  cell?: ComponentType
  /**
   * Make the column sticky to left or right
   */
  sticky?: EStickyPosition
}

export enum EStickyPosition {
  Left = 'left',
  Right = 'right',
}

import type { ComponentType } from 'svelte'

export interface Column {
  /**
   * The field of row data
   */
  field: string
  /**
   * The column width
   */
  width?: string
  /**
   * The title content. Can be a svelte component
   */
  title?: string | ComponentType
  /**
   * Customize the cell content with svelte component
   */
  cell?: ComponentType
  /**
   * Make the column sticky to left or right
   */
  sticky?: EStickyPosition
}

export enum EStickyPosition {
  Left = 'left',
  Right = 'right',
}
ts

CTable Props

  • striped
    boolean
    default: false

    Determine whether the table is striped or not.

  • columns
    Array<import('./types').Column>
    default: undefined

    The columns config array.

  • data
    Array<any>
    default: undefined

    The table data.

CTable Events

No data

CTable Slots

No data

CTable Exports

  • DEFAULT_WIDTH
    string
Suggest changes to this page
Last update at: 2023/08/15 05:32:01