Merge pull request #2209 from dxc-technology/jialecl-datagrid-defaultPage

Added the option to render in a different page by default

Author: Mil4n0r

apps/website/screens/components/data-grid/code/DataGridCodePage.tsx

@@ -147,14 +147,6 @@ const sections = [
             <td>Whether the rows can expand or not.</td>
             <td>-</td>
           </tr>
-          <tr>
-            <td>summaryRow</td>
-            <td>
-              <TableCode>GridRow</TableCode>
-            </td>
-            <td>Extra row that will be always visible.</td>
-            <td>-</td>
-          </tr>
           <tr>
             <td>selectable</td>
             <td>
@@ -185,18 +177,6 @@ const sections = [
             </td>
             <td>-</td>
           </tr>
-          <tr>
-            <td>uniqueRowId</td>
-            <td>
-              <TableCode>string</TableCode>
-            </td>
-            <td>
-              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 <Code>selectable</Code> is set to true,{" "}
-              <Code>expandable</Code> is set to true or <Code>rows</Code> is of type <Code>HierarchyGridRow[]</Code>.
-            </td>
-            <td>-</td>
-          </tr>
           <tr>
             <td>onGridRowsChange</td>
             <td>
@@ -217,11 +197,23 @@ const sections = [
             <td>-</td>
           </tr>
           <tr>
-            <td>onPageChange</td>
+            <td>uniqueRowId</td>
             <td>
-              <TableCode>{`(page: number) => void`}</TableCode>
+              <TableCode>string</TableCode>
             </td>
-            <td>Function called whenever the current page is changed.</td>
+            <td>
+              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 <Code>selectable</Code> is set to true,{" "}
+              <Code>expandable</Code> is set to true or <Code>rows</Code> is of type <Code>HierarchyGridRow[]</Code>.
+            </td>
+            <td>-</td>
+          </tr>
+          <tr>
+            <td>summaryRow</td>
+            <td>
+              <TableCode>GridRow</TableCode>
+            </td>
+            <td>Extra row that will be always visible.</td>
             <td>-</td>
           </tr>
           <tr>
@@ -233,21 +225,13 @@ const sections = [
             <td>false</td>
           </tr>
           <tr>
-            <td>totalItems</td>
+            <td>defaultPage</td>
             <td>
               <TableCode>number</TableCode>
             </td>
-            <td>Number of total items.</td>
+            <td>Default page in which the datagrid is rendered.</td>
             <td>-</td>
           </tr>
-          <tr>
-            <td>showGoToPage</td>
-            <td>
-              <TableCode>boolean</TableCode>
-            </td>
-            <td>If true, a select component for navigation between pages will be displayed.</td>
-            <td>true</td>
-          </tr>
           <tr>
             <td>itemsPerPage</td>
             <td>
@@ -275,6 +259,30 @@ const sections = [
             </td>
             <td>-</td>
           </tr>
+          <tr>
+            <td>onPageChange</td>
+            <td>
+              <TableCode>{`(page: number) => void`}</TableCode>
+            </td>
+            <td>Function called whenever the current page is changed.</td>
+            <td>-</td>
+          </tr>
+          <tr>
+            <td>showGoToPage</td>
+            <td>
+              <TableCode>boolean</TableCode>
+            </td>
+            <td>If true, a select component for navigation between pages will be displayed.</td>
+            <td>true</td>
+          </tr>
+          <tr>
+            <td>totalItems</td>
+            <td>
+              <TableCode>number</TableCode>
+            </td>
+            <td>Number of total items.</td>
+            <td>-</td>
+          </tr>
         </tbody>
       </DxcTable>
     ),

packages/lib/src/data-grid/DataGrid.stories.tsx

@@ -834,6 +834,7 @@ const DataGridPaginator = () => {
           selectable
           selectedRows={selectedRows}
           onSelectRows={setSelectedRows}
+          defaultPage={2}
           showPaginator
         />
       </ExampleContainer>
@@ -852,6 +853,7 @@ const DataGridPaginator = () => {
           onSelectRows={setSelectedChildRows}
           showPaginator
           itemsPerPage={2}
+          defaultPage={2}
         />
       </ExampleContainer>
       <ExampleContainer>
@@ -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));
+  },
 };

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<GridRow[] | HierarchyGridRow[] | ExpandableGridRow[]>(rows);
   const colorsTheme = useContext(HalstackContext);
-  const [page, changePage] = useState(1);
+  const [page, changePage] = useState(defaultPage);
 
   const goToPage = (newPage: number) => {
     if (onPageChange) {

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 = {