Table

Display data in a structured, tabular format

Use the Table component to display data in a structured, tabular format, consisting of rows and columns. They can be used for organizing and presenting large amounts of data clearly and efficiently.

---
import { Table } from 'webcoreui/astro'

const table = [
    ['1', 'John Doe'],
    ['2', 'Jane Smith'],
    ['3', 'Emily Davis'],
    ['4', 'Frank Williams']
]
---

<Table data={table} />

<script>
    import { Table } from 'webcoreui/svelte'

    const table = [
        ['1', 'John Doe'],
        ['2', 'Jane Smith'],
        ['3', 'Emily Davis'],
        ['4', 'Frank Williams']
    ]
</script>

<Table data={table} />

import React from 'react'
import { Table } from 'webcoreui/react'

const table = [
    ['1', 'John Doe'],
    ['2', 'Jane Smith'],
    ['3', 'Emily Davis'],
    ['4', 'Frank Williams']
]

const Component = () => <Table data={table} />

export default Component

The table data can be defined as a multidimensional array, where each row is represented by an array of strings. String can also accept HTML elements to render arbitrary data.

Heading and Footer

To add heading or a footer to your tables, use the heading and footer props respectively:

<Table
    headings={['ID', 'Name']}
    data={table}
    footer={['Total', '4']}
/>

Arrays must have the same length as the number of columns. If you need to render an empty column, simply specify an empty string.

Striped Tables

The tables appearance can be customized using the striped and offsetStripe props:

<Table
    data={tableData}
    striped="row"
/>

<Table
    data={tableData}
    striped="row"
    offsetStripe={true}
/>

The can be replicated with columns by changing the value of the striped prop from row to column:

<Table
    data={tableData}
    striped="column"
/>

<Table
    data={tableData}
    striped="column"
    offsetStripe={true}
/>

Highlight on Hover

To highlight rows on hover, set the hover prop to true

<Table
    headings={['ID', 'Name']}
    data={table}
    footer={['Total', '4']}
    hover={true}
/>

Compact Tables

Tables can be made smaller by setting the compact prop to true:

<Table
    data={table}
    compact={true}
/>

Scroll Tables

If you have large sets of data, and you need to limit the height of your tables, you can set a maximum height using the maxHeight prop:

<Table
    headings={['Class', 'Layout']}
    data={table}
    maxHeight="350px"
/>

This will create a scrollable table with a fixed header. You can pass any valid CSS value to the maxHeight prop.

Alignments

If you need to change the alingment or columns, use the className prop with additional CSS. For example:

<Table
    data={table}
    className="center"
/>

<style>
    .center table {
        text-align: center;
    }
</style>

<Table
    data={table}
    className="right"
/>

<style>
    .right table {
        text-align: right;
    }
</style>

API

type TableProps = {
    headings?: string[]
    footer?: string[]
    data: string[][]
    hover?: boolean
    striped?: 'column' | 'row'
    offsetStripe?: boolean
    compact?: boolean
    maxHeight?: number
    className?: string
}