diff --git a/apps/website/screens/components/data-grid/code/DataGridCodePage.tsx b/apps/website/screens/components/data-grid/code/DataGridCodePage.tsx
index 8ec6d7ce9..ff4ef1b2c 100644
--- a/apps/website/screens/components/data-grid/code/DataGridCodePage.tsx
+++ b/apps/website/screens/components/data-grid/code/DataGridCodePage.tsx
@@ -147,14 +147,6 @@ const sections = [
| Whether the rows can expand or not. |
- |
-
- | summaryRow |
-
- GridRow
- |
- Extra row that will be always visible. |
- - |
-
| selectable |
@@ -185,18 +177,6 @@ const sections = [
|
- |
-
- | uniqueRowId |
-
- string
- |
-
- This prop indicates the unique key that can be used to identify each row. The value of that key can be
- either a number or a string. This prop is mandatory if selectable is set to true,{" "}
- expandable is set to true or rows is of type HierarchyGridRow[].
- |
- - |
-
| onGridRowsChange |
@@ -217,11 +197,23 @@ const sections = [
| - |
- | onPageChange |
+ uniqueRowId |
- {`(page: number) => void`}
+ string
|
- Function called whenever the current page is changed. |
+
+ This prop indicates the unique key that can be used to identify each row. The value of that key can be
+ either a number or a string. This prop is mandatory if selectable is set to true,{" "}
+ expandable is set to true or rows is of type HierarchyGridRow[].
+ |
+ - |
+
+
+ | summaryRow |
+
+ GridRow
+ |
+ Extra row that will be always visible. |
- |
@@ -233,21 +225,13 @@ const sections = [
| false |
- | totalItems |
+ defaultPage |
number
|
- Number of total items. |
+ Default page in which the datagrid is rendered. |
- |
-
- | showGoToPage |
-
- boolean
- |
- If true, a select component for navigation between pages will be displayed. |
- true |
-
| itemsPerPage |
@@ -275,6 +259,30 @@ const sections = [
|
- |
+
+ | onPageChange |
+
+ {`(page: number) => void`}
+ |
+ Function called whenever the current page is changed. |
+ - |
+
+
+ | showGoToPage |
+
+ boolean
+ |
+ If true, a select component for navigation between pages will be displayed. |
+ true |
+
+
+ | totalItems |
+
+ number
+ |
+ Number of total items. |
+ - |
+
),
diff --git a/packages/lib/src/data-grid/DataGrid.stories.tsx b/packages/lib/src/data-grid/DataGrid.stories.tsx
index 5f42b5aa4..92e9af1cc 100644
--- a/packages/lib/src/data-grid/DataGrid.stories.tsx
+++ b/packages/lib/src/data-grid/DataGrid.stories.tsx
@@ -834,6 +834,7 @@ const DataGridPaginator = () => {
selectable
selectedRows={selectedRows}
onSelectRows={setSelectedRows}
+ defaultPage={2}
showPaginator
/>
@@ -852,6 +853,7 @@ const DataGridPaginator = () => {
onSelectRows={setSelectedChildRows}
showPaginator
itemsPerPage={2}
+ defaultPage={2}
/>
@@ -1143,4 +1145,9 @@ export const DataGridSortedExpanded: Story = {
export const UnknownUniqueId: Story = {
render: DataGridUnknownUniqueRowId,
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+ const editorCell = canvas.getAllByText("Task 1")[0];
+ editorCell && (await userEvent.dblClick(editorCell));
+ },
};
diff --git a/packages/lib/src/data-grid/DataGrid.tsx b/packages/lib/src/data-grid/DataGrid.tsx
index da98402e4..83ee3d9cc 100644
--- a/packages/lib/src/data-grid/DataGrid.tsx
+++ b/packages/lib/src/data-grid/DataGrid.tsx
@@ -99,6 +99,8 @@ const DataGridContainer = styled.div<{
outline-color: ${(props) => props.theme.focusColor} !important;
.rdg-text-editor:focus {
border-color: transparent;
+ background-color: transparent;
+ color: ${(props) => props.theme.dataFontColor};
}
}
.rdg-header-row {
@@ -184,10 +186,11 @@ const DxcDataGrid = ({
onSort,
onPageChange,
totalItems,
+ defaultPage = 1,
}: DataGridPropsType): JSX.Element => {
const [rowsToRender, setRowsToRender] = useState(rows);
const colorsTheme = useContext(HalstackContext);
- const [page, changePage] = useState(1);
+ const [page, changePage] = useState(defaultPage);
const goToPage = (newPage: number) => {
if (onPageChange) {
diff --git a/packages/lib/src/data-grid/types.ts b/packages/lib/src/data-grid/types.ts
index 5b8dd4613..5a6161fc0 100644
--- a/packages/lib/src/data-grid/types.ts
+++ b/packages/lib/src/data-grid/types.ts
@@ -137,6 +137,10 @@ type PaginatedProps = {
* Function called whenever the current page is changed.
*/
onPageChange?: (_page: number) => void;
+ /**
+ * Default page in which the datagrid is rendered
+ */
+ defaultPage?: number;
};
type NonPaginatedProps = {
@@ -169,6 +173,10 @@ type NonPaginatedProps = {
* Function called whenever the current page is changed.
*/
onPageChange?: never;
+ /**
+ * Default page in which the datagrid is rendered
+ */
+ defaultPage?: never;
};
export type CommonProps = {