add syntax column

src/FilterLists.Web/src/components/ListInfoDrawer.tsx

@@ -63,7 +63,8 @@ export const ListInfoDrawer = (props: RouteComponentProps & Props) => {
       {props.syntax &&
         <SyntaxTag
           name={props.syntax.name}
-          definitionUrl={props.syntax.definitionUrl} />}
+          definitionUrl={props.syntax.definitionUrl}
+          showLabel={true} />}
       <SoftwareCloud
         software={props.software}
         showLabel={true} />

src/FilterLists.Web/src/components/SyntaxTag.tsx

@@ -4,18 +4,19 @@ import * as React from 'react';
 interface Props {
   name: string;
   definitionUrl: string;
+  showLabel?: boolean;
 };
 
 export const SyntaxTag = (props: Props) =>
   props.name
-    ? <>
-      <h3>Syntax:</h3>
+    ? <span>
+      {props.showLabel && <h3>Syntax:</h3>}
       <Tag>
         <TagContents
           name={props.name}
           definitionUrl={props.definitionUrl} />
       </Tag>
-    </>
+    </span>
     : null;
 
 const TagContents = (props: Props) =>

src/FilterLists.Web/src/components/listsTable/ListsTable.tsx

@@ -11,6 +11,7 @@ import { License } from '../../interfaces/License';
 import { List } from '../../interfaces/List';
 import { Maintainer } from '../../interfaces/Maintainer';
 import { Software } from '../../interfaces/Software';
+import { Syntax } from '../../interfaces/Syntax';
 import { Tag as TagInterface } from '../../interfaces/Tag';
 import { nameof } from '../../utils';
 import { Description } from '../Description';
@@ -18,6 +19,7 @@ import { LanguageCloud } from '../languageCloud';
 import { ListInfoButton } from '../ListInfoButton';
 import { MaintainerCloud } from '../maintainerCloud';
 import { SoftwareCloud, SoftwareIcon } from '../softwareCloud';
+import { SyntaxTag } from '../SyntaxTag';
 import { TagCloud } from '../tagCloud';
 import { arraySorter } from './arraySorter';
 import styles from './ListsTable.module.css';
@@ -28,11 +30,12 @@ interface Props {
   licenses: License[];
   maintainers: Maintainer[];
   software: Software[];
+  syntaxes: Syntax[];
   tags: TagInterface[];
 };
 
 export const ListsTable = (props: RouteComponentProps & Props) => {
-  const { lists, languages, licenses, maintainers, software, tags, ...routeComponentProps } = props;
+  const { lists, languages, licenses, maintainers, software, syntaxes, tags, ...routeComponentProps } = props;
   const tablePageSize = useTablePageSizer();
   const searchNameColumn = useSearchColumnFilter<List>(nameof<List>("name"));
   const searchDescriptionColumn = useSearchColumnFilter<List>(nameof<List>("description"));
@@ -116,6 +119,39 @@ export const ListsTable = (props: RouteComponentProps & Props) => {
             syntaxId
               ? <SoftwareCloud software={software.filter((s: Software) => s.syntaxIds.includes(syntaxId))} />
               : null} />}
+      {tablePageSize.isNarrowWindow
+        ? null
+        : <Table.Column<List>
+          title="Syntax"
+          key="Syntax"
+          dataIndex={nameof<List>("syntaxId")}
+          sorter={(a, b) => {
+            const syntaxA = syntaxes.find(s => s.id === a.syntaxId);
+            const syntaxB = syntaxes.find(s => s.id === b.syntaxId);
+            return syntaxA
+              ? syntaxB
+                ? syntaxA.name.localeCompare(syntaxB.name)
+                : -1
+              : 1;
+          }}
+          width={254}
+          className={styles.nogrow}
+          filters={syntaxes.map(s => ({
+            text: <>
+              <SyntaxTag name={s.name} definitionUrl={s.definitionUrl} showLabel={false} />
+              ({visibleLists.filter(l => l.syntaxId && l.syntaxId === s.id).length})
+              </>,
+            value: s.id.toString()
+          }))}
+          onFilter={(value, record) => record.syntaxId
+            ? record.syntaxId.toString() === value
+            : false}
+          render={(syntaxId: number) => {
+            const syntax = syntaxes.find(s => s.id === syntaxId);
+            return syntax
+              ? <SyntaxTag name={syntax.name} definitionUrl={syntax.definitionUrl} />
+              : null
+          }} />}
       {tablePageSize.isNarrowWindow
         ? null
         : <Table.Column<List>

src/FilterLists.Web/src/components/listsTable/ListsTableHoc.tsx

@@ -21,6 +21,7 @@ export const ListsTableHoc = (props: RouteComponentProps) => {
         licenses={licenses}
         maintainers={maintainers}
         software={software}
+        syntaxes={syntaxes}
         tags={tags}
         {...props} />
       <ListDrawer