Skip to content

Datagrid - Added the option to render in a different page by default #2209

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

Merged
Mil4n0r merged 3 commits into from
Apr 10, 2025
Merged

Datagrid - Added the option to render in a different page by default #2209

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4ddd6ad
Added the option to render in a different page by default
Jialecl Apr 8, 2025
f1600c5
text editor transparent background
Jialecl Apr 9, 2025
bfc2c3e
added visual test and color
Jialecl Apr 9, 2025
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
74 changes: 41 additions & 33 deletions apps/website/screens/components/data-grid/code/DataGridCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
),
Expand Down
7 changes: 7 additions & 0 deletions packages/lib/src/data-grid/DataGrid.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -834,6 +834,7 @@ const DataGridPaginator = () => {
selectable
selectedRows={selectedRows}
onSelectRows={setSelectedRows}
defaultPage={2}
showPaginator
/>
</ExampleContainer>
Expand All @@ -852,6 +853,7 @@ const DataGridPaginator = () => {
onSelectRows={setSelectedChildRows}
showPaginator
itemsPerPage={2}
defaultPage={2}
/>
</ExampleContainer>
<ExampleContainer>
Expand Down Expand Up @@ -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));
},
};
5 changes: 4 additions & 1 deletion packages/lib/src/data-grid/DataGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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) {
Expand Down
8 changes: 8 additions & 0 deletions packages/lib/src/data-grid/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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 = {
Expand Down