Table

Find the source code here.

Overview

Table is a component showing information having same properties. For instance, customer orders list in an e-commerce shop.

Astropine Table component provides you two greats features working out of the box: sorting and filtering.

We will see in this page the many possibilities you can achieve with this component.

Basic Table

Here we have a basic table, taking just two props : columns and items.

P.S: Notice that columns is an array of items keys.

Copied !

import { Table } from "$components/table.component";
import { columns, items } from "$views/examples/table";


export function BasicTableExample() {
	return (
		<Table class="bg-white rounded-lg border" columns={columns} items={items} />
	);
}

Styling Table

About styling, Table component provides theadClass and tbodyClass props, which respectfully stylized thead and tbody tags. Two examples below.

First is about adding borders between columns. Second applied class only on even rows.

Copied !

import { Table } from "$components/table.component";
import { columns, items } from "$views/examples/table";

export function StylingTableExample() {
	return (
		<div class="flex flex-col gap-y-8">
			<div>
				<Table
					class="bg-white rounded-lg border"
					columns={columns}
					items={items}
					theadClass="divide-x"
					tbodyClass="[&>*]:divide-x"
				/>
			</div>
			<div>
				<Table
					class="bg-white rounded-lg border"
					columns={columns}
					items={items}
					tbodyClass="[&>*:nth-child(even)]:bg-slate-100 divide-y-0"
				/>
			</div>
		</div>
	);
}

Sorting Table

Table can be sorted. When enabling sorting, an icon will appear aside column label.

P.S: Just remember one rule, sorting applies to only one column.

Copied !

import { Table } from "$components/table.component";
import { sortColumns, items } from "$views/examples/table";

export function SortingTableExample() {
	return (
		<Table
			class="bg-white rounded-lg border"
			columns={sortColumns}
			items={items}
		/>
	);
}

Filtering Table

About filtering, a set of predefined filtering are provided to handle most cases. Check code part to see how this example handles filtering.

P.S: Multiple criterias are accepted when it comes to filter.

Copied !

import { Table } from "$components/table.component";
import { filterColumns, items } from "$views/examples/table";

export function FilteringTableExample() {

	return (
		<Table
			class="bg-white rounded-lg border"
			columns={filterColumns}
			items={items}
		/>
	);
}

Sorting and Filtering

Table This example is just a combination of sorting and filtering.

Copied !

import { Table } from "$components/table.component";
import {
    items,
    sortAndFilterColumns
} from "$views/examples/table";

export function SortingAndFilteringTableExample() {
	return (
		<Table
			class="bg-white rounded-lg border"
			columns={sortAndFilterColumns}
			items={items}
		/>
	);
}