init

src/routes/(authed)/recipe/overview/columns.ts

@@ -0,0 +1,92 @@
+import { renderComponent } from '$lib/components/ui/data-table';
+import type { ColumnDef } from '@tanstack/table-core';
+import DataTableTagsBadge from './data-table-tags-badge.svelte';
+import DataTableHeader from './data-table-header.svelte';
+
+import type { FilterFn } from '@tanstack/table-core';
+import { rankItem } from '@tanstack/match-sorter-utils';
+import DataTableActions from './data-table-actions.svelte';
+import { get } from 'svelte/store';
+import { referenceFromPage } from '$lib/core/stores/recipeStore';
+
+const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
+	const itemRank = rankItem(row.getValue(columnId), value);
+	addMeta({ itemRank });
+	return itemRank.passed;
+};
+
+export type RecipeOverview = {
+	productCode: string;
+	name: string;
+	description: string;
+	tags: string;
+	status: 'ready' | 'obsolete' | 'drafted' | 'pending/online' | 'pending/offline';
+};
+
+export const columns: ColumnDef<RecipeOverview>[] = [
+	{
+		accessorKey: 'productCode',
+		header: ({ column }) =>
+			renderComponent(DataTableHeader, {
+				onclick: column.getToggleSortingHandler(),
+				data: 'Product Code'
+			}),
+		enableGlobalFilter: true,
+		filterFn: 'includesString'
+	},
+	{
+		accessorKey: 'name',
+		header: ({ column }) =>
+			renderComponent(DataTableHeader, {
+				onclick: column.getToggleSortingHandler(),
+				data: 'Name'
+			}),
+		enableGlobalFilter: true,
+		filterFn: 'includesString'
+	},
+	{
+		accessorKey: 'description',
+		header: ({ column }) =>
+			renderComponent(DataTableHeader, {
+				onclick: column.getToggleSortingHandler(),
+				data: 'Description'
+			}),
+		enableGlobalFilter: true,
+		filterFn: 'includesString'
+	},
+	{
+		accessorKey: 'tags',
+		header: ({ column }) =>
+			renderComponent(DataTableHeader, {
+				onclick: column.getToggleSortingHandler(),
+				data: 'Tags'
+			}),
+		cell: ({ row }) => {
+			return renderComponent(DataTableTagsBadge, { tags: row.original.tags });
+		},
+		enableGlobalFilter: true,
+		filterFn: 'includesString'
+	},
+	{
+		accessorKey: 'status',
+		header: ({ column }) =>
+			renderComponent(DataTableHeader, {
+				onclick: column.getToggleSortingHandler(),
+				data: 'Status'
+			}),
+		cell: ({ row }) => {
+			return renderComponent(DataTableTagsBadge, { tags: row.original.status });
+		},
+		enableGlobalFilter: true,
+		filterFn: 'includesString'
+	},
+	{
+		id: 'actions',
+		cell: ({ row }) => {
+			return renderComponent(DataTableActions, {
+				refPage: get(referenceFromPage),
+				...row.original
+			});
+		}
+	}
+];