Data table

import {
	DataTable,
	type DataTableColumn,
} from "@moodinary/ui/components/data-table";
import { MoodWord } from "@moodinary/ui/components/mood-dot";

interface Team {
	id: string;
	kind: string;
	mood: number;
	name: string;
	pulses: number;
}
const rows: Team[] = [
	{ id: "1a", kind: "escuela", mood: 3.8, name: "1.º A", pulses: 41 },
	{ id: "2b", kind: "escuela", mood: 3.1, name: "2.º B", pulses: 27 },
	{ id: "3a", kind: "escuela", mood: 4.3, name: "3.º A", pulses: 33 },
	{ id: "4a", kind: "escuela", mood: 2.7, name: "4.º A", pulses: 6 },
	{ id: "5b", kind: "escuela", mood: 3.5, name: "5.º B", pulses: 19 },
	{
		id: "ventas",
		kind: "empresa",
		mood: 3.4,
		name: "Equipo Ventas",
		pulses: 22,
	},
	{
		id: "soporte",
		kind: "empresa",
		mood: 2.9,
		name: "Equipo Soporte",
		pulses: 15,
	},
	{
		id: "producto",
		kind: "empresa",
		mood: 4.0,
		name: "Equipo Producto",
		pulses: 12,
	},
];
const level = (v: number) =>
	Math.min(5, Math.max(1, Math.round(v))) as 1 | 2 | 3 | 4 | 5;
const columns: DataTableColumn<Team>[] = [
	{ header: "Equipo", id: "name", sortable: true, value: (r) => r.name },
	{
		cell: (r) => <MoodWord level={level(r.mood)} />,
		header: "Ánimo",
		id: "mood",
		sortable: true,
		value: (r) => r.mood,
	},
	{
		header: "Pulsos (7 días)",
		id: "pulses",
		sortable: true,
		value: (r) => r.pulses,
	},
];

export default function DataTableTeams() {
	return (
		<div className="w-full">
			<p className="mb-2 text-ink-3 text-xs">Datos ilustrativos.</p>
			<DataTable
				bulkAction={{ label: "Exportar CSV", onAction: () => undefined }}
				columns={columns}
				defaultSort={{ column: "name", direction: "ascending" }}
				filter={{
					label: "Tipo",
					options: [
						{ label: "Escuela", value: "escuela" },
						{ label: "Empresa", value: "empresa" },
					],
					value: (r) => r.kind,
				}}
				getRowId={(r) => r.id}
				getRowLabel={(r) => r.name}
				label="Equipos"
				rows={rows}
				searchPlaceholder="Filtrar equipos…"
				searchText={(r) => r.name}
			/>
		</div>
	);
}

import { DataTable } from "@moodinary/ui/components/data-table";

export default function DataTableEmpty() {
	return (
		<div className="w-full">
			<DataTable
				columns={[
					{
						header: "Equipo",
						id: "name",
						value: (r: { id: string; name: string }) => r.name,
					},
				]}
				getRowId={(r) => r.id}
				getRowLabel={(r) => r.name}
				label="Equipos sin resultados"
				rows={[]}
				searchText={(r) => r.name}
				selectable={false}
			/>
		</div>
	);
}