diff --git a/web/src/components/filterlist-table/columns.tsx b/web/src/components/filterlist-table/columns.tsx index 472e28e72..c54e2425d 100644 --- a/web/src/components/filterlist-table/columns.tsx +++ b/web/src/components/filterlist-table/columns.tsx @@ -14,6 +14,27 @@ export const columns = [ columnHelper.accessor((row) => row.description, { header: "Description", }), + columnHelper.accessor((row) => row.syntaxIds, { + header: "Syntaxes", + cell: (info) => { + const meta = info.table.options.meta as FilterListsTableMeta; + const syntaxes = + info.getValue()?.flatMap((id) => { + const syntax = meta.syntaxes.find((s) => s.id === id); + return syntax + ? [ + { + key: syntax.id, + value: syntax.name, + tooltip: syntax.description ?? undefined, + href: syntax.url ?? undefined, + }, + ] + : []; + }) ?? []; + return ; + }, + }), columnHelper.accessor((row) => row.languageIds, { header: "Languages", cell: (info) => { diff --git a/web/src/components/filterlist-table/index.tsx b/web/src/components/filterlist-table/index.tsx index 4564c5903..ae4c6d3c2 100644 --- a/web/src/components/filterlist-table/index.tsx +++ b/web/src/components/filterlist-table/index.tsx @@ -30,6 +30,7 @@ import { Tag } from "@/services/get-tags"; export interface FilterListsTableMeta extends TableMeta { languages: readonly Language[]; licenses: readonly License[]; + syntaxes: readonly Syntax[]; } type FilterListTableProps = { @@ -48,6 +49,7 @@ export function FilterListTable({ initialFilterLists, languages, licenses, + syntaxes, }: FilterListTableProps) { const [data, setData] = useState(initialFilterLists); const [loading, setLoading] = useState(true); @@ -71,6 +73,7 @@ export function FilterListTable({ meta: { languages, licenses, + syntaxes, }, });