Skip to content

Control sorting through props for iTwin and iModel tables #223

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
arome wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Control sorting through props for iTwin and iModel tables #223

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8cc3097
feat(iModelGrid): add sort state persistence to IModelTable and IMode…
arome Jul 10, 2026
137e2f6
feat(iTwinTable): add sort state persistence to ITwinTable and ITwinG…
arome Jul 10, 2026
5eb72db
feat: implement controlled sort model for IModelGrid and ITwinGrid co…
arome Jul 10, 2026
553f764
feat(iModelBrowser): add controlled table sorting for iTwin/iModel ta…
arome Jul 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions common/changes/@itwin/imodel-browser-react/omar-save-sort-imodel-table_2026-07-10-18-00.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"changes": [
{
"packageName": "@itwin/imodel-browser-react",
"comment": "Controlled table sorting for iTwin/iModel tables",
"type": "minor"
}
],
"packageName": "@itwin/imodel-browser-react"
}
38 changes: 38 additions & 0 deletions packages/apps/storybook/src/imodel-browser/mui/IModelGridMUI.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import Avatar from "@mui/material/Avatar";
import AvatarGroup from "@mui/material/AvatarGroup";
import Chip from "@mui/material/Chip";
import Typography from "@mui/material/Typography";
import { GridSortModel } from "@mui/x-data-grid";
import { action } from "@storybook/addon-actions";
import { Meta, Story } from "@storybook/react/types-6-0";
import SvgDelete from "@stratakit/icons/delete.svg";
Expand Down Expand Up @@ -158,6 +159,43 @@ TableViewWithOverrides.args = {
},
};

export const TableWithControlledSort: Story<IModelGridMUIProps> =
withITwinIdOverride(
withAccessTokenOverride((args) => {
const [sortModel, setSortModel] = React.useState<GridSortModel>([
{ field: "name", sort: "desc" },
]);

return (
<div>
<Typography variant="body2" style={{ marginBottom: 8 }}>
Controlled sort model: {JSON.stringify(sortModel)}
</Typography>
<ExternalComponent
{...args}
viewMode="cells"
sortModel={sortModel}
onSortModelChange={(newSortModel) => {
action("sort model changed")(newSortModel);
setSortModel(newSortModel);
}}
/>
</div>
);
})
);
TableWithControlledSort.args = {
...baseArgs,
};
TableWithControlledSort.parameters = {
docs: {
description: {
story:
"The sort state is fully controlled by the parent via `sortModel` and `onSortModelChange`, so it can be saved anywhere the consumer wants.",
},
},
};

export const OverrideApiDataWithLoadMore: Story<IModelGridMUIProps> =
withITwinIdOverride(
withAccessTokenOverride((args) => {
Expand Down
36 changes: 36 additions & 0 deletions packages/apps/storybook/src/imodel-browser/mui/ITwinGridMUI.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import AvatarGroup from "@mui/material/AvatarGroup";
import Box from "@mui/material/Box";
import Chip from "@mui/material/Chip";
import Typography from "@mui/material/Typography";
import { GridSortModel } from "@mui/x-data-grid";
import { action } from "@storybook/addon-actions";
import { Meta, Story } from "@storybook/react/types-6-0";
import React from "react";
Expand Down Expand Up @@ -79,6 +80,41 @@ TableView.args = {
],
};

export const TableWithControlledSort: Story<ITwinGridProps> =
withAccessTokenOverride((args) => {
const [sortModel, setSortModel] = React.useState<GridSortModel>([
{ field: "number", sort: "desc" },
]);

return (
<div>
<Typography variant="body2" style={{ marginBottom: 8 }}>
Controlled sort model: {JSON.stringify(sortModel)}
</Typography>
<ExternalComponent
{...args}
viewMode="cells"
sortModel={sortModel}
onSortModelChange={(newSortModel) => {
action("sort model changed")(newSortModel);
setSortModel(newSortModel);
}}
/>
</div>
);
});
TableWithControlledSort.args = {
...baseArgs,
};
TableWithControlledSort.parameters = {
docs: {
description: {
story:
"The sort state is fully controlled by the parent via `sortModel` and `onSortModelChange`, so it can be saved anywhere the consumer wants.",
},
},
};

export const TableViewWithOverrides = Template.bind({});
TableViewWithOverrides.args = {
...baseArgs,
Expand Down
13 changes: 13 additions & 0 deletions packages/modules/imodel-browser/src/mui/containers/ITwinGrid/ITwinGridMUI.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import Box from "@mui/material/Box";
import { GridSortModel } from "@mui/x-data-grid";
import React from "react";
import { InView } from "react-intersection-observer";

Expand Down Expand Up @@ -77,6 +78,14 @@ export interface ITwinGridPropsMUI
tableOverrides?: ITwinTableOverridesMUI;
/** Localized string overrides - falls back to default English strings if not provided */
stringsOverrides?: Partial<ITwinGridStringsMUI>;
/**
* Controlled sort model for the table view. When provided, the table's sort
* state is fully controlled by the parent and must be kept in sync via
* `onSortModelChange`.
*/
sortModel?: GridSortModel;
/** Called whenever the table sort model changes. */
onSortModelChange?: (sortModel: GridSortModel) => void;
}

/**
Expand All @@ -99,6 +108,8 @@ export const ITwinGridMUI = ({
viewMode,
tableOverrides,
className,
sortModel,
onSortModelChange,
}: ITwinGridPropsMUI) => {
const {
iTwinFavorites,
Expand Down Expand Up @@ -287,6 +298,8 @@ export const ITwinGridMUI = ({
tableOverrides={tableOverrides}
isLoading={fetchStatus === DataStatus.Fetching}
fetchMore={fetchMore}
sortModel={sortModel}
onSortModelChange={onSortModelChange}
/>
);
};
Expand Down
12 changes: 12 additions & 0 deletions packages/modules/imodel-browser/src/mui/containers/ITwinGrid/ITwinTableMUI.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
DataGrid,
GRID_DEFAULT_LOCALE_TEXT,
GridColDef,
GridSortModel,
} from "@mui/x-data-grid";
import svgMore from "@stratakit/icons/more-vertical.svg";
import { Icon } from "@stratakit/mui";
Expand Down Expand Up @@ -65,6 +66,13 @@ export interface ITwinTableMUIProps {
isLoading?: boolean;
/** Called when more data should be loaded. */
fetchMore?: (() => void) | false;
/**
* Controlled sort model. When provided, the table's sort state is fully
* controlled by the parent and must be kept in sync via `onSortModelChange`.
*/
sortModel?: GridSortModel;
/** Called whenever the sort model changes. */
onSortModelChange?: (sortModel: GridSortModel) => void;
}

/**
Expand All @@ -85,6 +93,8 @@ export const ITwinTableMUI = ({
} = {},
isLoading,
fetchMore,
sortModel,
onSortModelChange,
}: ITwinTableMUIProps) => {
// Eagerly load all available data so the table has the full dataset
// for client-side pagination and sorting.
Expand Down Expand Up @@ -188,6 +198,8 @@ export const ITwinTableMUI = ({
rows={iTwins}
columns={columns}
loading={isLoading}
sortModel={sortModel}
onSortModelChange={onSortModelChange}
onRowClick={
actions
? (params) => {
Expand Down
13 changes: 13 additions & 0 deletions packages/modules/imodel-browser/src/mui/containers/iModelGrid/IModelGridMUI.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import Box from "@mui/material/Box";
import { GridSortModel } from "@mui/x-data-grid";
import React from "react";
import { InView } from "react-intersection-observer";

Expand Down Expand Up @@ -103,6 +104,14 @@ export interface IModelGridMUIProps
tileOverrides?: Partial<IModelTileMUIProps>;
tableOverrides?: IModelTableOverridesMUI;
stringsOverrides?: Partial<IModelGridStringsMUI>;
/**
* Controlled sort model for the table view. When provided, the table's sort
* state is fully controlled by the parent and must be kept in sync via
* `onSortModelChange`.
*/
sortModel?: GridSortModel;
/** Called whenever the table sort model changes. */
onSortModelChange?: (sortModel: GridSortModel) => void;
}

/**
Expand Down Expand Up @@ -149,6 +158,8 @@ const IModelGridInternal = ({
onRefetch,
dataMode = "internal",
disableAddToRecents = false,
sortModel,
onSortModelChange,
}: IModelGridMUIProps) => {
const [sort, setSort] = React.useState<IModelSortOptions>(sortOptions);

Expand Down Expand Up @@ -408,6 +419,8 @@ const IModelGridInternal = ({
tableOverrides={tableOverrides}
isLoading={fetchStatus === DataStatus.Fetching}
fetchMore={fetchMore}
sortModel={sortModel}
onSortModelChange={onSortModelChange}
data-testid="imodel-table"
/>
)}
Expand Down
12 changes: 12 additions & 0 deletions packages/modules/imodel-browser/src/mui/containers/iModelGrid/IModelTableMUI.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
DataGrid,
GRID_DEFAULT_LOCALE_TEXT,
GridColDef,
GridSortModel,

@alexdunae alexdunae Jul 10, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Given that we have such specific sort capabilities, do you think it would be better to define our own "sort model" data type, limited to our actual field names?

} from "@mui/x-data-grid";
import svgMore from "@stratakit/icons/more-vertical.svg";
import { Icon } from "@stratakit/mui";
Expand Down Expand Up @@ -62,6 +63,13 @@ export interface IModelTableMUIProps {
isLoading?: boolean;
/** Called when more data should be loaded. */
fetchMore?: (() => void) | false;
/**
* Controlled sort model. When provided, the table's sort state is fully
* controlled by the parent and must be kept in sync via `onSortModelChange`.
*/
sortModel?: GridSortModel;

@alexdunae alexdunae Jul 10, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like this just effects the table view, not the tile/card view. My initial thought is that would be good to keep sorting unified between both views. WDYT?

/** Called whenever the sort model changes. */
onSortModelChange?: (sortModel: GridSortModel) => void;
}

/**
Expand All @@ -79,6 +87,8 @@ export const IModelTableMUI = ({
} = {},
isLoading,
fetchMore,
sortModel,
onSortModelChange,
}: IModelTableMUIProps) => {
// Eagerly load all available data so the table has the full dataset
// for client-side pagination and sorting.
Expand Down Expand Up @@ -188,6 +198,8 @@ export const IModelTableMUI = ({
rows={iModels}
columns={columns}
loading={isLoading}
sortModel={sortModel}
onSortModelChange={onSortModelChange}
onRowClick={
actions
? (params) => {
Expand Down
Loading