diff --git a/frontend/src/pages/ontologies/OntologiesPage.tsx b/frontend/src/pages/ontologies/OntologiesPage.tsx index 177e5e54a..221851bc4 100644 --- a/frontend/src/pages/ontologies/OntologiesPage.tsx +++ b/frontend/src/pages/ontologies/OntologiesPage.tsx @@ -23,9 +23,10 @@ export default function OntologiesPage() { () => [ { accessorFn: (ontology) => ontology.getName(), //access nested data with dot notation + id: 'name', header: 'Ontology', size: 50, - Cell: ({row}) => { + Cell: ({row, renderedCellValue}) => { const name = row.original.getName(); const logo = row.original.getLogoURL(); const ontoId = row.original.getOntologyId(); @@ -44,7 +45,7 @@ export default function OntologiesPage() { } /> ) : null} - {name ?
{name}
: null} +
{renderedCellValue}
); } else return ontoId; @@ -52,13 +53,14 @@ export default function OntologiesPage() { }, { accessorFn: (ontology) => ontology.getOntologyId().toUpperCase(), + id: 'id', header: 'ID', size: 20, - Cell: ({row}) => { + Cell: ({row, renderedCellValue}) => { return (
- {row.original.getOntologyId().toUpperCase()} + {renderedCellValue}
); @@ -66,6 +68,7 @@ export default function OntologiesPage() { }, { accessorFn: (ontology) => ontology.getDescription(), //normal accessorKey + id: 'description', header: 'Description', size: 300, enableGlobalFilter: false, @@ -129,7 +132,27 @@ export default function OntologiesPage() { const table = useMaterialReactTable({ columns, data: ontologies, - initialState: { showGlobalFilter: true }, + initialState: { + showGlobalFilter: true, + sorting: [ + { + id: 'id', //sort by id by default on page load + desc: false, + }, + ], + }, + filterFns: { + myCustomFilter: (row, id, filterValue) => { + if (!filterValue) return true; + + const valueById = row.original.getOntologyId().toLowerCase(); + const valueByName = row.original.getName().toLowerCase(); + + if (valueById.includes(filterValue.toLowerCase())) return true; + return valueByName.includes(filterValue.toLowerCase()); + }, + }, + globalFilterFn: 'myCustomFilter', enableFullScreenToggle: false, enableDensityToggle: false, enableHiding: false,