From a1727c33c2ac37c582cc11c896334e7c7c3f12c2 Mon Sep 17 00:00:00 2001 From: Alex Dunae Date: Thu, 18 Jun 2026 09:20:40 -0700 Subject: [PATCH] Use server sorting for Stratakit table components --- ...-stratakit-tablesort_2026-06-18-16-22.json | 10 +++++ .../mui/IModelGridMUI.stories.tsx | 33 +++++++++++++- .../mui/ITwinGridMUI.stories.tsx | 20 +++++++++ .../containers/ITwinGrid/ITwinTableMUI.tsx | 1 + .../containers/iModelGrid/IModelGridMUI.tsx | 34 ++++---------- .../containers/iModelGrid/IModelTableMUI.tsx | 1 + .../iModelGrid/clientSideIModelSort.ts | 44 ------------------- 7 files changed, 72 insertions(+), 71 deletions(-) create mode 100644 common/changes/@itwin/imodel-browser-react/disable-stratakit-tablesort_2026-06-18-16-22.json delete mode 100644 packages/modules/imodel-browser/src/mui/containers/iModelGrid/clientSideIModelSort.ts diff --git a/common/changes/@itwin/imodel-browser-react/disable-stratakit-tablesort_2026-06-18-16-22.json b/common/changes/@itwin/imodel-browser-react/disable-stratakit-tablesort_2026-06-18-16-22.json new file mode 100644 index 00000000..0116bc8d --- /dev/null +++ b/common/changes/@itwin/imodel-browser-react/disable-stratakit-tablesort_2026-06-18-16-22.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "@itwin/imodel-browser-react", + "comment": "Use server sorting for Stratakit table components", + "type": "patch" + } + ], + "packageName": "@itwin/imodel-browser-react" +} \ No newline at end of file diff --git a/packages/apps/storybook/src/imodel-browser/mui/IModelGridMUI.stories.tsx b/packages/apps/storybook/src/imodel-browser/mui/IModelGridMUI.stories.tsx index c5584528..587b1b98 100644 --- a/packages/apps/storybook/src/imodel-browser/mui/IModelGridMUI.stories.tsx +++ b/packages/apps/storybook/src/imodel-browser/mui/IModelGridMUI.stories.tsx @@ -38,7 +38,37 @@ export const IModelGridMUI = (props: IModelGridMUIProps) => ( export default { title: "imodel-browser/IModelGridMUI", component: IModelGridMUI, - argTypes: accessTokenArgTypes, + argTypes: { + ...accessTokenArgTypes, + sortOptions: { + control: "radio", + options: [ + "name asc", + "name desc", + "createdDateTime asc", + "createdDateTime desc", + ], + mapping: { + "name asc": { sortType: "name", descending: false }, + "name desc": { sortType: "name", descending: true }, + "createdDateTime asc": { + sortType: "createdDateTime", + descending: false, + }, + "createdDateTime desc": { + sortType: "createdDateTime", + descending: true, + }, + }, + }, + searchText: { + description: "Search text", + control: "text", + }, + }, + args: { + sortOptions: "name asc", + }, excludeStories: ["IModelGridMUI"], } as Meta; @@ -48,7 +78,6 @@ const Template: Story = withITwinIdOverride( const baseArgs: IModelGridMUIProps = { apiOverrides: { serverEnvironmentPrefix: "qa" }, - sortOptions: { sortType: "name", descending: false }, actions: [ { key: "open", diff --git a/packages/apps/storybook/src/imodel-browser/mui/ITwinGridMUI.stories.tsx b/packages/apps/storybook/src/imodel-browser/mui/ITwinGridMUI.stories.tsx index 8a9acff1..2e6a1720 100644 --- a/packages/apps/storybook/src/imodel-browser/mui/ITwinGridMUI.stories.tsx +++ b/packages/apps/storybook/src/imodel-browser/mui/ITwinGridMUI.stories.tsx @@ -405,6 +405,26 @@ export default { component: ITwinGrid, argTypes: { accessToken, + orderbyOptions: { + control: "radio", + options: [ + "displayName asc", + "displayName desc", + "number asc", + "number desc", + "createdDateTime asc", + "createdDateTime desc", + "lastModifiedDateTime asc", + "lastModifiedDateTime desc", + ], + }, + filterOptions: { + description: "Search text", + control: "text", + }, + }, + args: { + orderbyOptions: "displayName asc", }, excludeStories: ["ITwinGrid"], } as Meta; diff --git a/packages/modules/imodel-browser/src/mui/containers/ITwinGrid/ITwinTableMUI.tsx b/packages/modules/imodel-browser/src/mui/containers/ITwinGrid/ITwinTableMUI.tsx index a5c93f7e..04c6a9ac 100644 --- a/packages/modules/imodel-browser/src/mui/containers/ITwinGrid/ITwinTableMUI.tsx +++ b/packages/modules/imodel-browser/src/mui/containers/ITwinGrid/ITwinTableMUI.tsx @@ -217,6 +217,7 @@ export const ITwinTableMUI = ({ } disableRowSelectionOnClick disableMultipleRowSelection + disableColumnSorting disableColumnSelector disableColumnFilter initialState={{ diff --git a/packages/modules/imodel-browser/src/mui/containers/iModelGrid/IModelGridMUI.tsx b/packages/modules/imodel-browser/src/mui/containers/iModelGrid/IModelGridMUI.tsx index b813b43c..83c4b03e 100644 --- a/packages/modules/imodel-browser/src/mui/containers/iModelGrid/IModelGridMUI.tsx +++ b/packages/modules/imodel-browser/src/mui/containers/iModelGrid/IModelGridMUI.tsx @@ -37,7 +37,6 @@ import { type IModelTileMUIProps, IModelTileMUI, } from "../iModelTiles/IModelTileMUI"; -import { clientSideIModelSort } from "./clientSideIModelSort"; import { type IModelTableMUIStrings, IModelTableMUI } from "./IModelTableMUI"; /** @@ -153,18 +152,11 @@ const IModelGridInternal = ({ const [sort, setSort] = React.useState(sortOptions); React.useEffect(() => { - setSort( - viewMode === "cells" - ? { - sortType: "name", - descending: false, - } - : { - sortType: sortOptions.sortType, - descending: sortOptions.descending, - } - ); - }, [sortOptions.descending, sortOptions.sortType, viewMode]); + setSort({ + sortType: sortOptions.sortType, + descending: sortOptions.descending, + }); + }, [sortOptions.descending, sortOptions.sortType]); const strings = React.useMemo( () => @@ -251,19 +243,11 @@ const IModelGridInternal = ({ }); const iModels = React.useMemo(() => { - const processed = + return ( postProcessCallback?.([...fetchediModels], fetchStatus, searchText) ?? - fetchediModels; - return clientSideIModelSort(processed, { viewMode, requestType, sort }); - }, [ - postProcessCallback, - fetchediModels, - fetchStatus, - searchText, - viewMode, - requestType, - sort, - ]); + fetchediModels + ); + }, [postProcessCallback, fetchediModels, fetchStatus, searchText]); React.useEffect(() => { if ( diff --git a/packages/modules/imodel-browser/src/mui/containers/iModelGrid/IModelTableMUI.tsx b/packages/modules/imodel-browser/src/mui/containers/iModelGrid/IModelTableMUI.tsx index 82d86087..4b727ccc 100644 --- a/packages/modules/imodel-browser/src/mui/containers/iModelGrid/IModelTableMUI.tsx +++ b/packages/modules/imodel-browser/src/mui/containers/iModelGrid/IModelTableMUI.tsx @@ -217,6 +217,7 @@ export const IModelTableMUI = ({ } disableRowSelectionOnClick disableMultipleRowSelection + disableColumnSorting disableColumnSelector disableColumnFilter initialState={{ diff --git a/packages/modules/imodel-browser/src/mui/containers/iModelGrid/clientSideIModelSort.ts b/packages/modules/imodel-browser/src/mui/containers/iModelGrid/clientSideIModelSort.ts deleted file mode 100644 index cfa4180e..00000000 --- a/packages/modules/imodel-browser/src/mui/containers/iModelGrid/clientSideIModelSort.ts +++ /dev/null @@ -1,44 +0,0 @@ -/*--------------------------------------------------------------------------------------------- - * Copyright (c) Bentley Systems, Incorporated. All rights reserved. - * See LICENSE.md in the project root for license terms and full copyright notice. - *--------------------------------------------------------------------------------------------*/ -import type { IModelFull, IModelSortOptions, ViewType } from "../../../types"; - -export interface ClientSideIModelSortOptions { - viewMode: ViewType | undefined; - requestType: "favorites" | "recents" | "" | undefined; - sort: IModelSortOptions; -} - -/** - * Client-side sort applied to the MUI iModel grid for tile view when the - * request type is "recents" or "favorites" — the server does not honor sort - * options for those request types, so we sort on the client. - */ -export const clientSideIModelSort = ( - iModels: IModelFull[], - { viewMode, requestType, sort }: ClientSideIModelSortOptions -): IModelFull[] => { - if (viewMode === "cells") { - return iModels; - } - if (requestType !== "recents" && requestType !== "favorites") { - return iModels; - } - - const sortValue = (iModel: IModelFull) => { - const currValue = - sort.sortType === "name" - ? iModel.displayName ?? iModel.name ?? "" - : iModel[sort.sortType] ?? ""; - return currValue.toLocaleLowerCase(); - }; - - return [...iModels].sort((a, b) => { - const aValue = sortValue(a); - const bValue = sortValue(b); - return sort.descending - ? bValue.localeCompare(aValue) - : aValue.localeCompare(bValue); - }); -};