diff --git a/apps/website/next-env.d.ts b/apps/website/next-env.d.ts index a4a7b3f5cf..4f11a03dc6 100644 --- a/apps/website/next-env.d.ts +++ b/apps/website/next-env.d.ts @@ -2,4 +2,4 @@ /// // NOTE: This file should not be edited -// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information. +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/apps/website/screens/components/data-grid/DatagridPageLayout.tsx b/apps/website/screens/components/data-grid/DatagridPageLayout.tsx index 76908f3d22..1323f8f8f7 100644 --- a/apps/website/screens/components/data-grid/DatagridPageLayout.tsx +++ b/apps/website/screens/components/data-grid/DatagridPageLayout.tsx @@ -6,8 +6,8 @@ import ComponentHeading from "@/common/ComponentHeading"; const DataGridPageHeading = ({ children }: { children: React.ReactNode }) => { const tabs = [ { label: "Code", path: "/components/data-grid" }, - // { label: "Usage", path: "/components/data-grid/usage" }, - // { label: "Specifications", path: "/components/data-grid/specifications" }, + { label: "Usage", path: "/components/data-grid/usage" }, + { label: "Specifications", path: "/components/data-grid/specifications" }, ]; return ( diff --git a/apps/website/screens/components/data-grid/code/DataGridCodePage.tsx b/apps/website/screens/components/data-grid/code/DataGridCodePage.tsx index 5f8780a135..5bfd55cc90 100644 --- a/apps/website/screens/components/data-grid/code/DataGridCodePage.tsx +++ b/apps/website/screens/components/data-grid/code/DataGridCodePage.tsx @@ -87,7 +87,7 @@ const sections = [ summaryKey: Value that will be rendered from the summaryRow
  • - alignment: St sets the alignment inside the cells. + alignment: Sets the alignment inside the cells.
    • @@ -174,6 +174,14 @@ const sections = [ - + + onGridRowsChange + + {`(rows: GridRow[] | HierarchyGridRow[] | ExpandableGridRow[]) => void`} + + Function called whenever a cell is edited. + - + ), diff --git a/apps/website/screens/components/data-grid/code/examples/basicUsage.ts b/apps/website/screens/components/data-grid/code/examples/basicUsage.ts index 202087863e..4cd9274304 100644 --- a/apps/website/screens/components/data-grid/code/examples/basicUsage.ts +++ b/apps/website/screens/components/data-grid/code/examples/basicUsage.ts @@ -13,29 +13,29 @@ const code = `() => { label: "% Complete", resizable: true, draggable: true, - alignment: "center", + alignment: "right", }, ]; const rows = [ { - id: 1, + id: "Row 1", complete: 46, }, { - id: 2, + id: "Row 2", complete: 51, }, { - id: 3, + id: "Row 3", complete: 40, }, { - id: 4, + id: "Row 4", complete: 10, }, - ]; + return ( diff --git a/apps/website/screens/components/data-grid/code/examples/expandable.ts b/apps/website/screens/components/data-grid/code/examples/expandable.ts index 2b2b3ecdda..5afec0df79 100644 --- a/apps/website/screens/components/data-grid/code/examples/expandable.ts +++ b/apps/website/screens/components/data-grid/code/examples/expandable.ts @@ -13,32 +13,32 @@ const code = `() => { label: "% Complete", resizable: true, draggable: true, - alignment: "center", + alignment: "right", }, ]; const rows = [ { - id: 1, + id: "Row 1", complete: 46, expandedContent: "Expanded content" }, { - id: 2, + id: "Row 2", complete: 51, expandedContent: "Expanded content", expandedContentHeight: 100 }, { - id: 3, + id: "Row 3", complete: 40, }, { - id: 4, + id: "Row 4", complete: 10, }, - ]; + return ( diff --git a/apps/website/screens/components/data-grid/code/examples/hierarchical.ts b/apps/website/screens/components/data-grid/code/examples/hierarchical.ts index 42fd8d49a6..1c23d38422 100644 --- a/apps/website/screens/components/data-grid/code/examples/hierarchical.ts +++ b/apps/website/screens/components/data-grid/code/examples/hierarchical.ts @@ -10,7 +10,7 @@ const code = `() => { { key: "value", label: "Value", - alignment: "center", + alignment: "right", summaryKey: "total" }, ]; diff --git a/apps/website/screens/components/data-grid/code/examples/hierarchicalSelectable.ts b/apps/website/screens/components/data-grid/code/examples/hierarchicalSelectable.ts index 19918de61c..230fd49314 100644 --- a/apps/website/screens/components/data-grid/code/examples/hierarchicalSelectable.ts +++ b/apps/website/screens/components/data-grid/code/examples/hierarchicalSelectable.ts @@ -11,7 +11,7 @@ const code = `() => { { key: "value", label: "Value", - alignment: "center", + alignment: "right", summaryKey: "total" }, ]; diff --git a/apps/website/screens/components/data-grid/code/examples/selectable.ts b/apps/website/screens/components/data-grid/code/examples/selectable.ts index 5e2504ad48..17493981bc 100644 --- a/apps/website/screens/components/data-grid/code/examples/selectable.ts +++ b/apps/website/screens/components/data-grid/code/examples/selectable.ts @@ -14,28 +14,27 @@ const code = `() => { label: "% Complete", resizable: true, draggable: true, - alignment: "center", + alignment: "right", }, ]; const rows = [ { - id: 1, + id: "Row 1", complete: 46, }, { - id: 2, + id: "Row 2", complete: 51, }, { - id: 3, + id: "Row 3", complete: 40, }, { - id: 4, + id: "Row 4", complete: 10, }, - ]; const [selectedRows, setSelectedRows] = useState(new Set()); diff --git a/apps/website/screens/components/data-grid/specs/DataGridSpecsPage.tsx b/apps/website/screens/components/data-grid/specs/DataGridSpecsPage.tsx index e82e98cbd8..bb4b23c7d9 100644 --- a/apps/website/screens/components/data-grid/specs/DataGridSpecsPage.tsx +++ b/apps/website/screens/components/data-grid/specs/DataGridSpecsPage.tsx @@ -8,15 +8,297 @@ import Figure from "@/common/Figure"; import Code from "@/common/Code"; const sections = [ - { - title: "Date input", - content: <>TODO, - }, { title: "Design tokens", subSections: [ { - title: "TODO", + title: "Color", + content: ( + + + + Component token + Element + Core token + Value + + + + + + rowSeparatorColor + + Separator + + color-grey-300 + + #cccccc + + + + dataBackgroundColor + + Data grid + + color-white + + #ffffff + + + + dataFontColor + + Data grid + + color-black + + #000000 + + + + headerBackgroundColor + + Header + + color-black + + #000000 + + + + headerBackgroundColor + + Header + + color-purple-700 + + #5f249f + + + + headerFontColor + + Header + + color-white + + #ffffff + + + + headerCheckboxBackgroundColorChecked + + Header checkbox + + color-white + + #ffffff + + + + headerCheckboxHoverBackgroundColorChecked + + Header checkbox:hover + + color-grey-200 + + #e6e6e6 + + + + headerCheckboxBorderColor + + Header checkbox + + color-white + + #ffffff + + + + headerCheckboxHoverBorderColor + + Header checkbox:hover + + color-white + + #ffffff + + + + headerCheckboxCheckColor + + Header checkbox + + color-purple-700 + + #5f249f + + + + focusColor + + Data grid + + color-blue-600 + + #0095ff + + + + scrollBarThumbColor + + Scroll bar + + color-grey-700 + + #666666 + + + + scrollBarTrackColor + + Scroll bar + + color-grey-300 + + #cccccc + + + + ), + }, + { + title: "Typography", + content: ( + + + + Component token + Element + Core token + Value + + + + + + dataFontFamily + + Data grid + + font-family-sans + + 'Open Sans', sans-serif + + + + dataFontSize + + Data grid + + font-scale-02 + + 0.875rem / 14px + + + + dataFontStyle + + Data grid + + font-style-normal + + normal + + + + dataFontWeight + + Data grid + + font-weight-regular + + 400 + + + + dataFontTextTransform + + Data grid + - + none + + + + dataTextLineHeight + + Data grid + - + normal + + + + headerFontFamily + + Header + + font-family-sans + + 'Open Sans', sans-serif + + + + headerFontSize + + Header + + font-scale-02 + + 0.875rem / 14px + + + + headerFontSize + + Header + + font-style-normal + + normal + + + + headerFontWeight + + Header + + font-weight-bold + + bold + + + + headerFontTextTransform + + Header + - + none + + + + headerTextLineHeight + + Header + - + normal + + + + ), + }, + { + title: "Separator", content: ( @@ -28,8 +310,130 @@ const sections = [ - - + + + rowSeparatorThickness + + Separator + - + 1px + + + + rowSeparatorStyle + + Separator + + border-style-solid + + solid + + + + ), + }, + { + title: "Spacing", + content: ( + + + + Component token + Element + Core token + Value + + + + + + dataPaddingRight + + Data grid + + spacing-8 + + 0.5rem / 8px + + + + dataPaddingLeft + + Data grid + + spacing-8 + + 0.5rem / 8px + + + + headerPaddingRight + + Header + + spacing-8 + + 0.5rem / 8px + + + + headerPaddingLeft + + Header + + spacing-8 + + 0.5rem / 8px + + + + ), + }, + { + title: "Size", + content: ( + + + + Component token + Element + Core token + Value + + + + + + dataRowHeight + + Data grid + - + 36 + + + + headerRowHeight + + Header + - + 36 + + + + summaryRowHeight + + Summary row + - + 36 + + + + headerBorderRadius + + Header + - + 4px + ), diff --git a/apps/website/screens/components/data-grid/usage/DataGridUsagePage.tsx b/apps/website/screens/components/data-grid/usage/DataGridUsagePage.tsx index 343e403d4a..83e354d1d2 100644 --- a/apps/website/screens/components/data-grid/usage/DataGridUsagePage.tsx +++ b/apps/website/screens/components/data-grid/usage/DataGridUsagePage.tsx @@ -1,15 +1,234 @@ -import { DxcBulletedList, DxcFlex } from "@dxc-technology/halstack-react"; +import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react"; import QuickNavContainer from "@/common/QuickNavContainer"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import DocFooter from "@/common/DocFooter"; +import Example from "@/common/example/Example"; +import expandedContent from "./examples/expandedContent"; +import selectable from "./examples/selectable"; +import filterable from "./examples/filterable"; +import draggable from "./examples/draggable"; const sections = [ { - title: "Usage", + title: "Overview", content: ( - - Use the data grid (TODO). - + + The Datagrid component offers a robust solution for displaying and managing tabular data. It supports essential + features such as sorting and filtering, allowing users to organize and refine data easily. With multi-selection + capabilities, users can perform bulk actions like deleting or exporting records efficiently. The component also + includes in-line editing for quick data modifications directly within the grid, and expandable rows for + showcasing additional details without cluttering the main view. Additionally, users can reorder columns to + customize their data layout, ensuring an intuitive and flexible user experience tailored to their specific + needs. + + ), + }, + { + title: "Key interactions and features", + subSections: [ + { + title: "Row selection", + content: ( + <> + + Users can select one or multiple rows for bulk actions. + + Row selection can persist across pages when pagination is used in the Datagrid, ensuring users can + perform bulk actions on rows even if they navigate away from the current view. + + + Users can set a default selected row on initial load, useful for pre-populating forms or automatically + highlighting the most relevant data for their specific use case. + + + Users can easily undo multiple selections at once using the select/deselect all feature located in the + Datagrid’s header, streamlining bulk actions. + + + + ), + subSections: [ + { + title: "Example", + content: , + }, + ], + }, + { + title: "Sorting and filtering", + content: ( + <> + + + Users can apply sorting to multiple columns simultaneously, enabling more complex data analysis by + arranging data based on different criteria. + + + Filtering in our Datagrid is enabled through integrated Halstack components, such as Dropdowns, and is + applied at the row level for precise data refinement. + + + + ), + subSections: [ + { + title: "Example", + content: , + }, + ], + }, + { + title: "In-line editing", + content: ( + <> + + + Users can modify data directly within the grid cells, allowing for quick and intuitive updates without + navigating away from the grid. This feature is particularly valuable for large datasets, where edits + need to be made directly within the data source for efficiency and real-time updates. + + + Changes made through in-line editing are immediately reflected in the Datagrid, giving users real-time + feedback on their edits. + + + Additionally, when editing permissions are required, the Datagrid can be configured with other Halstack + components, such as the Button, to enable editing only after the button is activated. + + + + ), + }, + { + title: "Expandable rows", + content: ( + <> + + + The Datagrid component allows users to reveal additional information for specific rows without + cluttering the main view. This optimizes space efficiency and improves user experience by offering + access to in-depth information when needed, all while maintaining a clean and organized grid layout. + + + The expanded area can display various content types, such as additional data fields, images, or action + buttons, enhancing the data presentation. + + + + ), + subSections: [ + { + title: "Example", + content: , + }, + ], + }, + { + title: "Column reordering", + content: ( + <> + + + The re-ordering feature of our Datagrid allows users to rearrange columns according to their preferences + by dragging and dropping them, enhancing the personalized data viewing experience. + + + By letting users prioritize the most relevant columns, this feature helps them access and analyze data + more efficiently. It is also designed to be user-friendly, enabling quick adjustments with minimal + effort. + + + As users drag columns, visual indicators guide them, making it clear where the column will be placed + when dropped. + + + + ), + subSections: [ + { + title: "Example", + content: , + }, + ], + }, + ], + }, + { + title: "Best practices", + content: ( + <> + + + Data contextualization: provide context within the grid by labeling columns clearly, + ensuring users understand the significance of the data they are viewing. + + + Column alignment: although data can be aligned in columns however the user chooses, it must + be aligned consistently across columns to enhance readability: + + + Text: aligned to the left for natural reading flow. + + + Numbers and currencies: align numbers, currencies, and other quantitative data to the + right for clear comparison, especially when dealing with decimals or aligning figures by their numerical + place value. + + + Dates and times: aligned to the left for readability, as users generally read these + like text, but consider right-aligning if dates need to be compared sequentially. + + + Actions: align action buttons or interactive elements (such as "Edit" or "Delete") to + the center or right, depending on layout consistency. Centering actions can make them more accessible + and distinguishable from data fields. + + + Booleans: align checkboxes or toggles to the center to visually separate them from text + or data and create a clear, interactive area. + + + Icons: aligned to the center or next to their corresponding text, with spacing, to + maintain clarity and improve the user interface. + + + + + Column sizing: make sure that columns are sized appropriately for the type of data they + display (e.g. dates should not take up too much space, neither do numerical values, which must take only the + minimal space it requires for them to be shown without truncation). + + + Clear default sorting: Set a sensible default sorting order for columns to help users + quickly access the most relevant data when they first interact with the grid. + + + Clear filters option: when filtering data, include a button to clear all filters at once, + allowing users to quickly reset their views and return to the unfiltered dataset. + + + Accessible bulk actions: ensure that bulk actions, such as “Delete” or “Export,” are easily + accessible once rows are selected, facilitating efficient data management. Consider also implementing + confirmation prompts for bulk actions to prevent accidental data loss and ensure users are intentional with + their actions. + + + Use of expandable rows: use expandable rows to display additional information that isn’t + crucial for immediate viewing, but avoid overusing this feature to prevent increased cognitive load on + users. + + + Limit expandable content: use expandable rows sparingly to avoid overwhelming users, + ensuring that only essential supplementary information is included. + + + Scrolling: the Datagrid supports both horizontal and vertical scrolling to handle extensive + data sets, ensuring all rows and columns are accessible without cluttering the UI. While the component + supports scrolling, it is designed to prioritize displaying the most essential data upfront, minimizing the + need for scrolling to reduce potential user confusion and enhance accessibility. + + + ), }, ]; diff --git a/apps/website/screens/components/data-grid/usage/examples/draggable.ts b/apps/website/screens/components/data-grid/usage/examples/draggable.ts new file mode 100644 index 0000000000..6a9f52d69c --- /dev/null +++ b/apps/website/screens/components/data-grid/usage/examples/draggable.ts @@ -0,0 +1,58 @@ +import { DxcDataGrid, DxcInset } from "@dxc-technology/halstack-react"; + +const code = `() => { + const columns = [ + { + key: "label", + label: "Name", + draggable: true, + }, + { + key: "id", + label: "ID", + draggable: true, + }, + { + key: "complete", + label: "% Complete", + draggable: true, + alignment: "right", + }, + ]; + + const rows = [ + { + label: "Task 1", + id: "ID-1", + complete: 46, + }, + { + label: "Task 2", + id: "ID-2", + complete: 51, + }, + { + label: "Task 3", + id: "ID-3", + complete: 40, + }, + { + label: "Task 4", + id: "ID-4", + complete: 10, + }, + ]; + + return ( + + + + ); +}`; + +const scope = { + DxcDataGrid, + DxcInset, +}; + +export default { code, scope }; diff --git a/apps/website/screens/components/data-grid/usage/examples/expandedContent.ts b/apps/website/screens/components/data-grid/usage/examples/expandedContent.ts new file mode 100644 index 0000000000..7c7bdbb6a6 --- /dev/null +++ b/apps/website/screens/components/data-grid/usage/examples/expandedContent.ts @@ -0,0 +1,76 @@ +import { DxcContainer, DxcDataGrid, DxcInset, DxcParagraph } from "@dxc-technology/halstack-react"; + +const code = `() => { + const columns = [ + { + key: "id", + label: "ID", + }, + { + key: "complete", + label: "% Complete", + alignment: "right", + }, + ]; + + const rows = [ + { + id: "Row 1", + complete: 46, + expandedContent: "Expanded content" + }, + { + id: "Row 2", + complete: 51, + expandedContent: + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras laoreet vulputate augue, non cursus justo eleifend non. + Nam ante erat, finibus at tincidunt ut, convallis sed tortor. Proin commodo vestibulum sagittis. + Nunc elit lorem, lobortis quis est in, tempus feugiat velit. Donec commodo hendrerit augue non suscipit. + Nam facilisis leo at est auctor, a faucibus diam lacinia. + In finibus urna id felis dictum blandit. + Praesent pharetra sapien ac purus fringilla, ac molestie metus ullamcorper. + Phasellus aliquet lobortis bibendum. Fusce convallis nulla at mauris tincidunt hendrerit sed sit amet est. + Fusce aliquam quam id efficitur convallis. Vivamus mattis ex in nisi aliquet, et volutpat nulla rhoncus. + Integer dui mauris, fringilla eu vulputate vel, ullamcorper ut orci. + + + In hac habitasse platea dictumst. + Sed velit arcu, consectetur pharetra hendrerit id, convallis id erat. + Quisque eu ante sed ligula blandit placerat ac vitae purus. + Proin ullamcorper dapibus erat. + Vestibulum hendrerit iaculis ipsum, sit amet aliquam enim ornare vitae. + Nullam molestie malesuada cursus. + Maecenas et blandit eros, at posuere urna. + Ut enim neque, volutpat sit amet scelerisque id, hendrerit vitae mi. + Morbi sit amet laoreet ante, eget gravida leo. Sed eu dolor at leo vestibulum imperdiet. + Aenean fringilla lorem et condimentum sollicitudin. + + , + expandedContentHeight: 200 + }, + { + id: "Row 3", + complete: 40, + }, + { + id: "Row 4", + complete: 10, + }, + + ]; + return ( + + + + ); +}`; + +const scope = { + DxcDataGrid, + DxcContainer, + DxcInset, + DxcParagraph, +}; + +export default { code, scope }; diff --git a/apps/website/screens/components/data-grid/usage/examples/filterable.ts b/apps/website/screens/components/data-grid/usage/examples/filterable.ts new file mode 100644 index 0000000000..c9c1f1c19a --- /dev/null +++ b/apps/website/screens/components/data-grid/usage/examples/filterable.ts @@ -0,0 +1,92 @@ +import { DxcDataGrid, DxcFlex, DxcInset, DxcSelect } from "@dxc-technology/halstack-react"; +import { useState } from "react"; + +const code = `() => { + const columns = [ + { + key: "id", + label: "ID", + }, + { + key: "complete", + label: "% Complete", + alignment: "right", + }, + ]; + + const rows1 = [ + { + id: "Row 1", + complete: 46, + }, + { + id: "Row 2", + complete: 51, + }, + { + id: "Row 3", + complete: 40, + }, + { + id: "Row 4", + complete: 10, + }, + ]; + + const rows2 = [ + { + id: "Row 11", + complete: 20, + }, + { + id: "Row 12", + complete: 1, + }, + { + id: "Row 13", + complete: 67, + }, + { + id: "Row 14", + complete: 47, + }, + ]; + + const options = [ + { label: "Data set 1", value: "rows1" }, + { label: "Data set 2", value: "rows2" }, + ]; + + const [rows, setRows]= useState(rows1); + const onChange = ({ value }) => { + value === "rows1" ? setRows(rows1) : setRows(rows2); + }; + + return ( + + + + + + + ); +}`; + +const scope = { + DxcDataGrid, + DxcSelect, + DxcInset, + DxcFlex, + useState, +}; + +export default { code, scope }; diff --git a/apps/website/screens/components/data-grid/usage/examples/selectable.ts b/apps/website/screens/components/data-grid/usage/examples/selectable.ts new file mode 100644 index 0000000000..a321c70447 --- /dev/null +++ b/apps/website/screens/components/data-grid/usage/examples/selectable.ts @@ -0,0 +1,57 @@ +import { DxcDataGrid, DxcInset } from "@dxc-technology/halstack-react"; +import { useState } from "react"; + +const code = `() => { + const columns = [ + { + key: "id", + label: "ID", + }, + { + key: "complete", + label: "% Complete", + alignment: "right", + }, + ]; + + const rows = [ + { + id: "Row 1", + complete: 46, + }, + { + id: "Row 2", + complete: 51, + }, + { + id: "Row 3", + complete: 40, + }, + { + id: "Row 4", + complete: 10, + }, + ]; + + const [selectedRows, setSelectedRows] = useState(new Set([1, 2])); + return ( + + + + ); +}`; + +const scope = { + DxcDataGrid, + DxcInset, + useState, +}; + +export default { code, scope }; diff --git a/packages/lib/src/data-grid/DataGrid.tsx b/packages/lib/src/data-grid/DataGrid.tsx index e579a64af4..370a04aedd 100644 --- a/packages/lib/src/data-grid/DataGrid.tsx +++ b/packages/lib/src/data-grid/DataGrid.tsx @@ -139,6 +139,10 @@ const DxcDataGrid = ({ setColumnsOrder(columnsToRender.map((_, index) => index)); }, [columnsToRender]); + useEffect(() => { + setRowsToRender(rows); + }, [rows]); + const reorderedColumns = useMemo(() => { // Array ordered by columnsOrder return columnsOrder.map((index) => columnsToRender[index]); @@ -294,6 +298,10 @@ const DataGridContainer = styled.div` border-right: ${(props) => `${props.theme.rowSeparatorThickness} ${props.theme.rowSeparatorStyle} ${props.theme.rowSeparatorColor}`}; background-color: ${(props) => props.theme.dataBackgroundColor}; + outline-color: ${(props) => props.theme.focusColor} !important; + .rdg-text-editor:focus { + border-color: transparent; + } } .rdg-header-row { border-top-left-radius: ${(props) => props.theme.headerBorderRadius}; diff --git a/packages/lib/src/data-grid/types.ts b/packages/lib/src/data-grid/types.ts index e723c0bde1..9deb6ebc1a 100644 --- a/packages/lib/src/data-grid/types.ts +++ b/packages/lib/src/data-grid/types.ts @@ -1,15 +1,42 @@ export type GridColumn = { + /** + * Key that will be rendered from each row in rows. + */ key: string; + /** + * Label that will be used for the column header. + */ label: string; + /** + * Whether the column is resizable or not. + */ resizable?: boolean; + /** + * Whether the column is sortable or not. + */ sortable?: boolean; + /** + * Whether the column is draggable or not. + */ draggable?: boolean; + /** + * Whether the column cells are editable or not. + */ textEditable?: boolean; + /** + * Value that will be rendered from the summaryRow. + */ summaryKey?: string; + /** + * Sets the alignment inside the cells. + */ alignment?: "left" | "right" | "center"; }; export type GridRow = { + /** + * List of rows that will be rendered in each cell based on the key in each column. + */ [key: string]: React.ReactNode | undefined; }; @@ -24,21 +51,45 @@ export type ExpandableGridRow = GridRow & { export type ExpandableRows = { rows: ExpandableGridRow[]; + /** + * Whether the rows can expand or not. + */ expandable: true; + /** + * This prop indicates the unique key that can be used to identify each row. This prop is mandatory if selectable is set to true, expandable is set to true or rows is of type HierarchyGridRow[]. + */ uniqueRowId: string; }; export type HierarchyRows = { rows: HierarchyGridRow[]; + /** + * This prop indicates the unique key that can be used to identify each row. This prop is mandatory if selectable is set to true, expandable is set to true or rows is of type HierarchyGridRow[]. + */ uniqueRowId: string; + /** + * Whether the rows can expand or not. + */ expandable?: false; }; export type SelectableGridProps = | { + /** + * Whether the rows are selectable or not. + */ selectable: true; + /** + * Set of selected rows. This prop is mandatory if selectable is set to true. The uniqueRowId key will be used to identify the each row. + */ selectedRows: Set; + /** + * Function called whenever the selected values changes. This prop is mandatory if selectable is set to true.The uniqueRowId key will be used to identify the rows. + */ onSelectRows: (selectedRows: Set) => void; + /** + * This prop indicates the unique key that can be used to identify each row. This prop is mandatory if selectable is set to true, expandable is set to true or rows is of type HierarchyGridRow[]. + */ uniqueRowId: string; } | { @@ -50,12 +101,21 @@ export type SelectableGridProps = export type CommonProps = { columns: GridColumn[]; + /** + * Extra row that will be always visible. + */ summaryRow?: GridRow; + /** + * Function called whenever a cell is edited. + */ onGridRowsChange?: (rows: GridRow[] | HierarchyGridRow[] | ExpandableGridRow[]) => void; }; export type BasicGridProps = { rows: GridRow[]; + /** + * Whether the rows can expand or not. + */ expandable?: false; };