diff --git a/packages/odyssey-react-mui/src/labs/DataView/DataView.test.tsx b/packages/odyssey-react-mui/src/labs/DataView/DataView.test.tsx
index 44cce028d..d3e834dcf 100644
--- a/packages/odyssey-react-mui/src/labs/DataView/DataView.test.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataView/DataView.test.tsx
@@ -76,56 +76,83 @@ describe("DataView", () => {
});
expect(rowElements.length).toBe(21);
- fireEvent.click(screen.getByText("Show more"));
-
waitFor(() => {
+ fireEvent.click(screen.getByText("Show more"));
+
const loadedRows = within(tableElement).getAllByRole("row", {
hidden: false,
});
expect(loadedRows.length).toBe(41);
});
});
-});
-
-it("resets the rows when searching", async () => {
- render(
- ,
- );
-
- const tableElement = await screen.findByRole("table", { name: "" });
- const rowElements = within(tableElement).getAllByRole("row", {
- hidden: false,
- });
- expect(rowElements.length).toBe(21);
- fireEvent.click(screen.getByText("Show more"));
+ it("resets the rows when searching", async () => {
+ render(
+ ,
+ );
- waitFor(() => {
- const loadedRows = within(tableElement).getAllByRole("row", {
+ const tableElement = await screen.findByRole("table", { name: "" });
+ const rowElements = within(tableElement).getAllByRole("row", {
hidden: false,
});
- expect(loadedRows.length).toBe(41);
+ expect(rowElements.length).toBe(21);
+
+ fireEvent.click(screen.getByText("Show more"));
+
+ waitFor(() => {
+ const loadedRows = within(tableElement).getAllByRole("row", {
+ hidden: false,
+ });
+ expect(loadedRows.length).toBe(41);
+ });
+
+ const searchField = screen.getByPlaceholderText("Search");
+ fireEvent.change(searchField, { target: { value: "John" } });
+
+ waitFor(() => {
+ const rowsAfterFilter = within(tableElement).getAllByRole("row", {
+ hidden: false,
+ });
+ expect(rowsAfterFilter.length).toBeLessThanOrEqual(21);
+ });
});
- const searchField = screen.getByPlaceholderText("Search");
- fireEvent.change(searchField, { target: { value: "John" } });
+ it("fires onPaginationChange when pagination changes", async () => {
+ let currentPage = 1;
+ const onPaginationChange = (pagination: {
+ pageIndex: number;
+ pageSize: number;
+ }) => {
+ currentPage = pagination.pageIndex;
+ };
- waitFor(() => {
- const rowsAfterFilter = within(tableElement).getAllByRole("row", {
- hidden: false,
+ render(
+ <>
+
+ >,
+ );
+
+ const nextButton = screen.getByLabelText("Next page");
+ fireEvent.click(nextButton);
+
+ await waitFor(() => {
+ expect(currentPage).toBe(2);
});
- expect(rowsAfterFilter.length).toBeLessThanOrEqual(21);
});
});
diff --git a/packages/odyssey-react-mui/src/labs/DataView/DataView.tsx b/packages/odyssey-react-mui/src/labs/DataView/DataView.tsx
index 79d6e8fb6..c3b883c81 100644
--- a/packages/odyssey-react-mui/src/labs/DataView/DataView.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataView/DataView.tsx
@@ -123,6 +123,7 @@ const DataView = ({
totalRows,
maxPages,
maxResultsPerPage,
+ onPaginationChange,
}: DataViewProps) => {
const odysseyDesignTokens = useOdysseyDesignTokens();
const { t } = useTranslation();
@@ -218,6 +219,11 @@ const DataView = ({
}));
}, [filters, paginationType, resultsPerPage, search]);
+ // Fire onPaginationChange if pagination changes
+ useEffect(() => {
+ onPaginationChange?.(pagination);
+ }, [onPaginationChange, pagination]);
+
// Retrieve the data
useEffect(() => {
fetchData({
diff --git a/packages/odyssey-react-mui/src/labs/DataView/componentTypes.ts b/packages/odyssey-react-mui/src/labs/DataView/componentTypes.ts
index 7960dbe7c..e06e2ef93 100644
--- a/packages/odyssey-react-mui/src/labs/DataView/componentTypes.ts
+++ b/packages/odyssey-react-mui/src/labs/DataView/componentTypes.ts
@@ -73,8 +73,19 @@ export type UniversalProps = {
maxResultsPerPage?: number;
metaText?: string;
noResultsPlaceholder?: ReactNode;
+ /**
+ * @deprecated onChangeRowSelection is now onRowSelectionChange
+ */
onChangeRowSelection?: (rowSelection: DataRowSelectionState) => void;
+ onPaginationChange?: ({
+ pageIndex,
+ pageSize,
+ }: {
+ pageIndex: number;
+ pageSize: number;
+ }) => void;
onReorderRows?: ({ rowId, newRowIndex }: DataOnReorderRowsType) => void;
+ onRowSelectionChange?: (rowSelection: DataRowSelectionState) => void;
paginationType?: (typeof paginationTypeValues)[number];
resultsPerPage?: number;
searchDelayTime?: number;
diff --git a/packages/odyssey-storybook/src/components/odyssey-labs/DataView/DataView.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-labs/DataView/DataView.stories.tsx
index 0b49457ca..141004d05 100644
--- a/packages/odyssey-storybook/src/components/odyssey-labs/DataView/DataView.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-labs/DataView/DataView.stories.tsx
@@ -989,3 +989,28 @@ export const LoadMore: StoryObj = {
hasFilters: true,
},
};
+
+export const PaginationHook: StoryObj = {
+ render: function C() {
+ const [data, setData] = useState(personData);
+ const { getData } = useDataCallbacks(data, setData);
+
+ const onPaginationChange = (pagination: {
+ pageIndex: number;
+ pageSize: number;
+ }) => {
+ console.log(pagination);
+ };
+
+ return (
+
+ );
+ },
+};