Search documentation v0.6.1

Table

Display data in a structured, tabular format

Source ↗️ Report Issue ↗️

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.

Preview
1 John Doe
2 Jane Smith
3 Emily Davis
4 Frank Williams
How to use Tables in Astro
---
import { Table } from 'webcoreui/astro'
const table = [
['1', 'John Doe'],
['2', 'Jane Smith'],
['3', 'Emily Davis'],
['4', 'Frank Williams']
]
---
<Table data={table} />
How to use Tables in Svelte
<script>
import { Table } from 'webcoreui/svelte'
const table = [
['1', 'John Doe'],
['2', 'Jane Smith'],
['3', 'Emily Davis'],
['4', 'Frank Williams']
]
</script>
<Table data={table} />
How to use Tables in React
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.

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

IDName
1 John Doe
2 Jane Smith
3 Emily Davis
4 Frank Williams
Total4
<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:

Striped rows
1 John Doe
2 Jane Smith
3 Emily Davis
4 Frank Williams
Striped rows with offset
1 John Doe
2 Jane Smith
3 Emily Davis
4 Frank Williams
<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:

Striped column
1 John Doe 2020
2 Jane Smith 2021
3 Emily Davis 2022
4 Frank Williams 2023
Striped column with offset
1 John Doe 2020
2 Jane Smith 2021
3 Emily Davis 2022
4 Frank Williams 2023
<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

Hover over the table rows to see hover effect
IDName
1 John Doe
2 Jane Smith
3 Emily Davis
4 Frank Williams
Total4
<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:

Default
1 John Doe
2 Jane Smith
3 Emily Davis
4 Frank Williams
Compact
1 John Doe
2 Jane Smith
3 Emily Davis
4 Frank Williams
<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:

ClassLayout
.col-2 Two-column layout
.col-3 Three-column layout
min-width: 600px: -
.xs-2 Two-column layout
.xs-3 Three-column layout
min-width: 800px: -
.sm-2 Two-column
.sm-3 Three-column
.sm-4 Four-column
min-width: 1024px: -
.md-2 Two-column
.md-3 Three-column
.md-4 Four-column
.md-5 Five-column
.md-6 Six-column
min-width: 1200px: -
.lg-2 Two-column
.lg-3 Three-column
.lg-4 Four-column
.lg-5 Five-column
.lg-6 Six-column
.lg-7 Seven-column
.lg-8 Eight-column
<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:

Center aligned
1 John Doe
2 Jane Smith
3 Emily Davis
4 Frank Williams
Right aligned
1 John Doe
2 Jane Smith
3 Emily Davis
4 Frank Williams
<Table
data={table}
className="center"
/>
<style>
.center table {
text-align: center;
}
</style>
<Table
data={table}
className="right"
/>
<style>
.right table {
text-align: right;
}
</style>
Tip
Need a table with filtering, sorting, pagination, and column toggle support? Check out the documentation of our DataTable component.

API

type TableProps = {
headings?: string[]
footer?: string[]
data: string[][]
hover?: boolean
striped?: 'column' | 'row'
offsetStripe?: boolean
compact?: boolean
maxHeight?: number
className?: string
}
PropPurpose
headings Sets heading for the table. Must be an array of strings.
footer Sets footer for the table. Most be an array of strings.
data Sets the table cells. Must be a multidimensional array of strings.
hover Adds a hover effect for rows. Defaults to false.
striped Adds stripes for the rows/columns. Its value can be one of column, or row.
offsetStripe Offsets the starting position of stripes if the striped prop is set.
compact Sets the padding of the cells to a smaller size.
maxHeight Sets a maximum height for the table, making it scrollable with a fixed header.
className Pass additional CSS classes for the table.
Svelte & React PropPurpose
onClick Attach on-click event listeners.

Request improvement for this page