92 lines
2.4 KiB
TypeScript
92 lines
2.4 KiB
TypeScript
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
|
|
});
|
|
}
|
|
}
|
|
];
|