Table Collection

Copyimport { createSelectColumn } from "@pex/ui-web/data/table-helpers";
 
const columns = [
	createSelectColumn(),
	// ... other columns
];

Copyimport { createSortableColumn } from "@pex/ui-web/data/table-helpers";
 
const columns = [
	createSortableColumn("name", "Name"),
	createSortableColumn("email", "Email"),
];

Copyimport { createImageColumn } from "@pex/ui-web/data/table-helpers";
 
const columns = [
	createImageColumn("avatar", "User", "name"),
	// Creates avatar with initials from name field
];

Copyimport { createActionsColumn } from "@pex/ui-web/data/table-helpers";
import { DropdownMenuItem } from "@pex/ui-web/primitives/dropdown-menu";
 
const columns = [
	createActionsColumn((row) => (
		<>
			<DropdownMenuItem onClick={() => edit(row.original)}>
				Edit
			</DropdownMenuItem>
			<DropdownMenuItem onClick={() => remove(row.original)}>
				Delete
			</DropdownMenuItem>
		</>
	)),
];

Copyimport { createBadgeColumn } from "@pex/ui-web/data/table-helpers";
 
const columns = [
	createBadgeColumn("status", "Status", (value) => {
		if (value === "Active") return "default";
		if (value === "Pending") return "secondary";
		if (value === "Inactive") return "destructive";
		return "outline";
	}),
];

Copyimport { createDateColumn } from "@pex/ui-web/data/table-helpers";
 
const columns = [
	createDateColumn("createdAt", "Created"),
	// Uses default format: Jan 15, 2024
 
	createDateColumn("updatedAt", "Updated", {
		year: "numeric",
		month: "long",
		day: "numeric",
	}),
	// Custom format: January 15, 2024
];

Copyimport { createCurrencyColumn } from "@pex/ui-web/data/table-helpers";
 
const columns = [
	createCurrencyColumn("price", "Price"),
	// Displays as $299.99
 
	createCurrencyColumn("cost", "Cost", "EUR"),
	// Displays as €299.99
];

Copyimport { createNumberColumn } from "@pex/ui-web/data/table-helpers";
 
const columns = [
	createNumberColumn("quantity", "Qty"),
	// Right-aligned numbers
 
	createNumberColumn("percentage", "Rate", {
		style: "percent",
		minimumFractionDigits: 2,
	}),
	// Displays as 45.67%
];