Table

The table component is used to display data in a tabular format. It does not use the table element, but rather uses CSS Grid to achieve the same effect. These two components are used to create a table layout:

  • <Table>
  • <TableRow>
  • <TableCell>

Properties

Table Properties

Name
Description
columns
This is the CSS Grid grid-template-columns property.
style
The style of the table. Can be either default or bordered. Default is default.
hover
Whether the table should have a hover effect or not. Default is false.

TableRow Properties

Name
Description
head
Whether the row is a header row or not. This will change the background color and font weight.

Examples

with Hover Effect

<Table columns="1fr 1fr" hover>
    <TableRow head>
        <TableCell>Col 1</TableCell>
        <TableCell>Col 2</TableCell>
    </TableRow>
    <TableRow>
        <TableCell>Value 1</TableCell>
        <TableCell>Value 2</TableCell>
    </TableRow>
    <TableRow>
        <TableCell>Value 1</TableCell>
        <TableCell>Value 2</TableCell>
    </TableRow>
</Table>
Col 1
Col 2
Value 1
Value 2
Value 3
Value 4

Bordered Style Table

<Table columns="1fr 100px 100px" style="bordered">
	<TableRow head>
		<TableCell>Feature</TableCell>
		<TableCell>Hyvor Blogs</TableCell>
		<TableCell>WordPress</TableCell>
	</TableRow>
	<TableRow section>
		Hosting & Infrastructure
	</TableRow>
	<TableRow>
		<TableCell>Fully managed hosting</TableCell>
		<TableCell>Yes</TableCell>
		<TableCell>No</TableCell>
	</TableRow>
	...
</Table>
Feature
Hyvor Blogs
WordPress
Hosting & Infrastructure
Fully managed hosting
Yes
No
Automatic security updates
Yes
No
Automatic backups
Yes
No
SEO & Performance
Built-in SEO tools
Yes
No