diff --git a/packages/manager-ui-kit/src/components/datagrid/Datagrid.component.tsx b/packages/manager-ui-kit/src/components/datagrid/Datagrid.component.tsx index e8f6518c80d2..ce04824578d1 100644 --- a/packages/manager-ui-kit/src/components/datagrid/Datagrid.component.tsx +++ b/packages/manager-ui-kit/src/components/datagrid/Datagrid.component.tsx @@ -1,8 +1,8 @@ import { useRef } from 'react'; -import { Table } from '@ovhcloud/ods-react'; +import { TABLE_SIZE, TABLE_VARIANT, Table } from '@ovhcloud/ods-react'; -import { DatagridProps, ExpandableRow } from '@/components/datagrid/Datagrid.props'; +import { ContainerHeight, DatagridProps, RowHeight } from '@/components/datagrid/Datagrid.props'; import { TableHeaderContent } from '@/components/datagrid/table/table-head'; import { TableBody } from './table/table-body/TableBody.component'; @@ -11,10 +11,7 @@ import { Topbar } from './topbar/Topbar.component'; import './translations'; import { useDatagrid } from './useDatagrid'; -const DEFAULT_ROW_HEIGHT = 50; -const DEFAULT_CONTAINER_HEIGHT = 570; - -export const Datagrid = >({ +export const Datagrid = >({ autoScroll = true, columns, columnVisibility, @@ -25,18 +22,22 @@ export const Datagrid = >({ filters, hasNextPage, isLoading, - maxRowHeight = DEFAULT_ROW_HEIGHT, + maxRowHeight, resourceType, rowSelection, search, sorting, + size = TABLE_SIZE.md, subComponentHeight, topbar, totalCount, + variant = TABLE_VARIANT.default, onFetchAllPages, onFetchNextPage, renderSubComponent, }: DatagridProps) => { + const rowHeight = RowHeight[size]; + const DEFAULT_CONTAINER_HEIGHT = maxRowHeight || ContainerHeight[size]; const { features, getHeaderGroups, @@ -56,6 +57,7 @@ export const Datagrid = >({ setColumnVisibility: columnVisibility?.setColumnVisibility, rowSelection, expandable, + sizeRow: size, }); const { hasSortingFeature, hasSearchFeature, hasColumnVisibilityFeature, hasFilterFeature } = features; @@ -71,6 +73,7 @@ export const Datagrid = >({ }; const shouldRenderTopbar = topbar || hasSearchFeature || hasFilterFeature || hasColumnVisibilityFeature; + return ( <> {shouldRenderTopbar && ( @@ -91,7 +94,7 @@ export const Datagrid = >({ /> )}
- +
headerGroups={headerGroups} onSortChange={sorting?.setSorting} @@ -107,7 +110,7 @@ export const Datagrid = >({ isLoading={isLoading ?? false} renderSubComponent={renderSubComponent} subComponentHeight={subComponentHeight} - maxRowHeight={maxRowHeight} + maxRowHeight={rowHeight} contentAlignLeft={contentAlignLeft} />
diff --git a/packages/manager-ui-kit/src/components/datagrid/Datagrid.props.ts b/packages/manager-ui-kit/src/components/datagrid/Datagrid.props.ts index 8dbbafa1f948..6e96ee6789ad 100644 --- a/packages/manager-ui-kit/src/components/datagrid/Datagrid.props.ts +++ b/packages/manager-ui-kit/src/components/datagrid/Datagrid.props.ts @@ -10,6 +10,8 @@ import type { VisibilityState, } from '@tanstack/react-table'; +import { TABLE_SIZE, TABLE_VARIANT } from '@ovhcloud/ods-react'; + import { FilterTypeCategories as DatagridColumnTypes, FilterComparator, @@ -69,9 +71,11 @@ export type DatagridProps> = { rowSelection?: RowSelectionProps; search?: SearchProps; sorting?: SortingProps; + size?: TABLE_SIZE; subComponentHeight?: number; topbar?: ReactNode; totalCount?: number; + variant?: TABLE_VARIANT; onFetchAllPages?: () => void; onFetchNextPage?: () => void; renderSubComponent?: ( @@ -86,7 +90,18 @@ export enum ColumnMetaType { BADGE = 'badge', } -// export type ManagerColumnDef = ColumnDef & { +export enum RowHeight { + sm = 32.5, + md = 48.5, + lg = 64.5, +} + +export enum ContainerHeight { + sm = 375, + md = 550, + lg = 725, +} + export type DatagridColumn = ColumnDef & { /** set column comparator for the filter */ comparator?: FilterComparator[]; diff --git a/packages/manager-ui-kit/src/components/datagrid/__tests__/Datagrid.snapshot.spec.tsx b/packages/manager-ui-kit/src/components/datagrid/__tests__/Datagrid.snapshot.spec.tsx index e9dc82f0d12c..c5974f2cb396 100644 --- a/packages/manager-ui-kit/src/components/datagrid/__tests__/Datagrid.snapshot.spec.tsx +++ b/packages/manager-ui-kit/src/components/datagrid/__tests__/Datagrid.snapshot.spec.tsx @@ -1,6 +1,8 @@ import { screen } from '@testing-library/react'; import { type Mock, describe, expect, it, vi } from 'vitest'; +import { TABLE_SIZE, TABLE_VARIANT } from '@ovhcloud/ods-react'; + import { renderDataGrid } from '@/commons/tests-utils/Render.utils'; import { IamAuthorizationResponse } from '@/hooks/iam/IAM.type'; import { useAuthorizationIam } from '@/hooks/iam/useOvhIam'; @@ -30,80 +32,116 @@ describe('Datagrid Snapshot Tests', () => { mockedHook.mockReturnValue(mockIamResponse); }); - it('should match snapshot with basic props', () => { - const { container } = renderDataGrid({ columns: mockBasicColumns, data: mockData }); - expect(container.firstChild).toMatchSnapshot(); - }); - - it('should match snapshot with sorting enabled', () => { - const { container } = renderDataGrid({ - columns: mockBasicColumns, - data: mockData, - sorting: { - sorting: [{ id: 'name', desc: false }], - setSorting: mockOnSortChange, - manualSorting: false, + it.each([ + { + description: 'basic props', + props: { columns: mockBasicColumns, data: mockData }, + }, + { + description: 'sorting enabled', + props: { + columns: mockBasicColumns, + data: mockData, + sorting: { + sorting: [{ id: 'name', desc: false }], + setSorting: mockOnSortChange, + manualSorting: false, + }, }, - }); - expect(container.firstChild).toMatchSnapshot(); - }); - - it('should match snapshot with search enabled', () => { - const { container } = renderDataGrid({ - columns: mockBasicColumns, - data: mockData, - search: mockSearch, - }); - expect(container.firstChild).toMatchSnapshot(); - }); - - it('should match snapshot with filters enabled', () => { - const { container } = renderDataGrid({ - columns: mockBasicColumns, - data: mockData, - filters: mockFilters, - }); - expect(container.firstChild).toMatchSnapshot(); - }); - - it('should match snapshot with column visibility enabled', () => { - const { container } = renderDataGrid({ - columns: mockBasicColumns, - data: mockData, - columnVisibility: { - columnVisibility: mockColumnVisibility, - setColumnVisibility: mockSetColumnVisibility, + }, + { + description: 'search enabled', + props: { + columns: mockBasicColumns, + data: mockData, + search: mockSearch, }, - }); + }, + { + description: 'filters enabled', + props: { + columns: mockBasicColumns, + data: mockData, + filters: mockFilters, + }, + }, + { + description: 'column visibility enabled', + props: { + columns: mockBasicColumns, + data: mockData, + columnVisibility: { + columnVisibility: mockColumnVisibility, + setColumnVisibility: mockSetColumnVisibility, + }, + }, + }, + { + description: 'pagination', + props: { + columns: mockBasicColumns, + data: mockData, + hasNextPage: true, + onFetchNextPage: mockOnFetchNextPage, + onFetchAllPages: mockOnFetchAllPages, + totalCount: 100, + isLoading: false, + }, + }, + { + description: 'loading state', + props: { + columns: mockBasicColumns, + data: mockData, + isLoading: true, + }, + }, + { + description: 'empty data', + props: { + columns: mockBasicColumns, + data: [], + }, + }, + { + description: 'row selection', + props: { + columns: mockBasicColumns, + data: mockData, + rowSelection: mockRowSelection, + }, + }, + { + description: 'custom container height', + props: { + columns: mockBasicColumns, + data: mockData, + containerHeight: 400, + }, + }, + ])('should match snapshot with $description', ({ props }) => { + const { container } = renderDataGrid(props); expect(container.firstChild).toMatchSnapshot(); }); - it('should match snapshot with pagination', () => { + it.each([ + { size: TABLE_SIZE.sm, description: 'small size' }, + { size: TABLE_SIZE.md, description: 'medium size' }, + { size: TABLE_SIZE.lg, description: 'large size' }, + ])('should match snapshot with $description', ({ size }) => { const { container } = renderDataGrid({ columns: mockBasicColumns, data: mockData, - hasNextPage: true, - onFetchNextPage: mockOnFetchNextPage, - onFetchAllPages: mockOnFetchAllPages, - totalCount: 100, - isLoading: false, + size, }); expect(container.firstChild).toMatchSnapshot(); }); - it('should match snapshot with loading state', () => { + it('should match snapshot with striped variant', () => { const { container } = renderDataGrid({ columns: mockBasicColumns, data: mockData, - isLoading: true, - }); - expect(container.firstChild).toMatchSnapshot(); - }); - - it('should match snapshot with empty data', () => { - const { container } = renderDataGrid({ - columns: mockBasicColumns, - data: [], + variant: TABLE_VARIANT.striped, }); expect(container.firstChild).toMatchSnapshot(); }); @@ -124,24 +162,6 @@ describe('Datagrid Snapshot Tests', () => { expect(container.firstChild).toMatchSnapshot(); }); - it('should match snapshot with row selection', () => { - const { container } = renderDataGrid({ - columns: mockBasicColumns, - data: mockData, - rowSelection: mockRowSelection, - }); - expect(container.firstChild).toMatchSnapshot(); - }); - - it('should match snapshot with custom container height', () => { - const { container } = renderDataGrid({ - columns: mockBasicColumns, - data: mockData, - containerHeight: 400, - }); - expect(container.firstChild).toMatchSnapshot(); - }); - it('should match snapshot with all features enabled', () => { const { container } = renderDataGrid({ columns: mockBasicColumns, diff --git a/packages/manager-ui-kit/src/components/datagrid/__tests__/Datagrid.spec.tsx b/packages/manager-ui-kit/src/components/datagrid/__tests__/Datagrid.spec.tsx index a574a40aba42..a122bd305d3f 100644 --- a/packages/manager-ui-kit/src/components/datagrid/__tests__/Datagrid.spec.tsx +++ b/packages/manager-ui-kit/src/components/datagrid/__tests__/Datagrid.spec.tsx @@ -1,6 +1,8 @@ import { fireEvent, screen } from '@testing-library/react'; import { type Mock, beforeEach, describe, expect, it, vi } from 'vitest'; +import { TABLE_SIZE, TABLE_VARIANT } from '@ovhcloud/ods-react'; + import { FilterComparator } from '@ovh-ux/manager-core-api'; import { assertNotNull } from '@/commons/tests-utils/Assertions.utils'; @@ -307,6 +309,41 @@ describe('Datagrid', () => { }); /* ------------------------- All Features Combined ------------------------- */ + describe('Table Styles', () => { + it('should render with small size', () => { + const { container } = renderDataGrid({ + columns: mockBasicColumns, + data: mockData, + size: TABLE_SIZE.sm, + }); + const table = container.querySelector('table'); + expect(table).toBeInTheDocument(); + expect(table?.className).toContain('table--sm'); + }); + + it('should render with large size', () => { + const { container } = renderDataGrid({ + columns: mockBasicColumns, + data: mockData, + size: TABLE_SIZE.lg, + }); + const table = container.querySelector('table'); + expect(table).toBeInTheDocument(); + expect(table?.className).toContain('table--lg'); + }); + + it('should render with striped variant', () => { + const { container } = renderDataGrid({ + columns: mockBasicColumns, + data: mockData, + variant: TABLE_VARIANT.striped, + }); + const table = container.querySelector('table'); + expect(table).toBeInTheDocument(); + expect(table?.className).toContain('table--striped'); + }); + }); + describe('All Features Combined', () => { it('should render with all features enabled', () => { const customTopbar =
Custom Topbar
; diff --git a/packages/manager-ui-kit/src/components/datagrid/__tests__/__snapshots__/Datagrid.snapshot.spec.tsx.snap b/packages/manager-ui-kit/src/components/datagrid/__tests__/__snapshots__/Datagrid.snapshot.spec.tsx.snap index 789701bf6b00..b038c7ea8f0a 100644 --- a/packages/manager-ui-kit/src/components/datagrid/__tests__/__snapshots__/Datagrid.snapshot.spec.tsx.snap +++ b/packages/manager-ui-kit/src/components/datagrid/__tests__/__snapshots__/Datagrid.snapshot.spec.tsx.snap @@ -1,23 +1,1817 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`Datagrid Snapshot Tests > should match snapshot with all features enabled 1`] = ` +exports[`Datagrid Snapshot Tests > should match snapshot with 'basic props' 1`] = ` +
+ + + + + + + + + + + + + + + + + +
+ name + + age +
+
+
+ John Doe +
+
+ 		+
+
+ 30 +
+
+
+
+
+ Jane Smith +
+
+ 		+
+
+ 25 +
+
+
+
+`; + +exports[`Datagrid Snapshot Tests > should match snapshot with 'column visibility enabled' 1`] = ` +
+ + + + + + + + + + + + + + + + + +
+ name + + age +
+
+
+ John Doe +
+
+ 		+
+
+ 30 +
+
+
+
+
+ Jane Smith +
+
+ 		+
+
+ 25 +
+
+
+
+`; + +exports[`Datagrid Snapshot Tests > should match snapshot with 'custom container height' 1`] = ` +
+ + + + + + + + + + + + + + + + + +
+ name + + age +
+
+
+ John Doe +
+
+ 		+
+
+ 30 +
+
+
+
+
+ Jane Smith +
+
+ 		+
+
+ 25 +
+
+
+
+`; + +exports[`Datagrid Snapshot Tests > should match snapshot with 'empty data' 1`] = ` +
+ + + + + + + + + + + + +
+ name + + age +
+

+ Aucun résultat +

+
+
+`; + +exports[`Datagrid Snapshot Tests > should match snapshot with 'filters enabled' 1`] = ` +
+ + + + + + + + + + + + + + + + + +
+ name + + age +
+
+
+ John Doe +
+
+ 		+
+
+ 30 +
+
+
+
+
+ Jane Smith +
+
+ 		+
+
+ 25 +
+
+
+
+`; + +exports[`Datagrid Snapshot Tests > should match snapshot with 'large size' 1`] = ` +
+ + + + + + + + + + + + + + + + + +
+ name + + age +
+
+
+ John Doe +
+
+ 		+
+
+ 30 +
+
+
+
+
+ Jane Smith +
+
+ 		+
+
+ 25 +
+
+
+
+`; + +exports[`Datagrid Snapshot Tests > should match snapshot with 'loading state' 1`] = ` +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ name + + age +
+
+
+ John Doe +
+
+ 		+
+
+ 30 +
+
+
+
+
+ Jane Smith +
+
+ 		+
+
+ 25 +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+`; + +exports[`Datagrid Snapshot Tests > should match snapshot with 'medium size' 1`] = ` +
+ + + + + + + + + + + + + + + + + +
+ name + + age +
+
+
+ John Doe +
+
+ 		+
+
+ 30 +
+
+
+
+
+ Jane Smith +
+
+ 		+
+
+ 25 +
+
+
+
+`; + +exports[`Datagrid Snapshot Tests > should match snapshot with 'pagination' 1`] = ` +
+ + + + + + + + + + + + + + + + + +
+ name + + age +
+
+
+ John Doe +
+
+ 		+
+
+ 30 +
+
+
+
+
+ Jane Smith +
+
+ 		+
+
+ 25 +
+
+
+
+`; + +exports[`Datagrid Snapshot Tests > should match snapshot with 'row selection' 1`] = ` +
+ + + + + + + + + + + + + + + + + + + + +
+ + + name + + age +
+
+ +
+ 		+
+
+ John Doe +
+
+ 		+
+
+ 30 +
+
+
+
+ +
+ 		+
+
+ Jane Smith +
+
+ 		+
+
+ 25 +
+
+
+
+`; + +exports[`Datagrid Snapshot Tests > should match snapshot with 'search enabled' 1`] = ` +
+ + + + + + + + + + + + + + + + + +
+ name + + age +
+
+
+ John Doe +
+
+ 		+
+
+ 30 +
+
+
+
+
+ Jane Smith +
+
+ 		+
+
+ 25 +
+
+
+
+`; + +exports[`Datagrid Snapshot Tests > should match snapshot with 'small size' 1`] = ` +
+ + + + + + + + + + + + + + + + + +
+ name + + age +
+
+
+ John Doe +
+
+ 		+
+
+ 30 +
+
+
+
+
+ Jane Smith +
+
+ 		+
+
+ 25 +
+
+
+
+`; + +exports[`Datagrid Snapshot Tests > should match snapshot with 'sorting enabled' 1`] = `
+ + + + + + + + + + + + + + +
+
+ + name + + + + +
+ 		+
+ + age + + + +
+
+
+
+ Jane Smith +
+
+ 		+
+
+ 25 +
+
+
+
+
+ John Doe +
+
+ 		+
+
+ 30 +
+
+
+
+`; + +exports[`Datagrid Snapshot Tests > should match snapshot with all features enabled 1`] = ` +
+ + +
should match snapshot with all features enabl
should match snapshot with all features enabl
should match snapshot with all features enabl
should match snapshot with all features enabl
John Doe @@ -273,11 +2069,12 @@ exports[`Datagrid Snapshot Tests > should match snapshot with all features enabl
30 @@ -288,21 +2085,21 @@ exports[`Datagrid Snapshot Tests > should match snapshot with all features enabl
Jane Smith @@ -395,11 +2194,12 @@ exports[`Datagrid Snapshot Tests > should match snapshot with all features enabl
25 @@ -418,23 +2218,21 @@ exports[`Datagrid Snapshot Tests > should match snapshot with basic props 1`] = style="max-height: 100%; height: 100%;" > - +
name age @@ -442,20 +2240,21 @@ exports[`Datagrid Snapshot Tests > should match snapshot with basic props 1`] =
John Doe @@ -463,11 +2262,12 @@ exports[`Datagrid Snapshot Tests > should match snapshot with basic props 1`] =
30 @@ -478,14 +2278,15 @@ exports[`Datagrid Snapshot Tests > should match snapshot with basic props 1`] =
Jane Smith @@ -493,11 +2294,12 @@ exports[`Datagrid Snapshot Tests > should match snapshot with basic props 1`] =
25 @@ -516,23 +2318,21 @@ exports[`Datagrid Snapshot Tests > should match snapshot with column visibility style="max-height: 100%; height: 100%;" > - +
name age @@ -540,20 +2340,21 @@ exports[`Datagrid Snapshot Tests > should match snapshot with column visibility
John Doe @@ -561,11 +2362,12 @@ exports[`Datagrid Snapshot Tests > should match snapshot with column visibility
30 @@ -576,14 +2378,15 @@ exports[`Datagrid Snapshot Tests > should match snapshot with column visibility
Jane Smith @@ -591,11 +2394,12 @@ exports[`Datagrid Snapshot Tests > should match snapshot with column visibility
25 @@ -614,23 +2418,21 @@ exports[`Datagrid Snapshot Tests > should match snapshot with custom container h style="max-height: 400px; height: 400px;" > - +
name age @@ -638,20 +2440,21 @@ exports[`Datagrid Snapshot Tests > should match snapshot with custom container h
John Doe @@ -659,11 +2462,12 @@ exports[`Datagrid Snapshot Tests > should match snapshot with custom container h
30 @@ -674,14 +2478,15 @@ exports[`Datagrid Snapshot Tests > should match snapshot with custom container h
Jane Smith @@ -689,11 +2494,12 @@ exports[`Datagrid Snapshot Tests > should match snapshot with custom container h
25 @@ -712,23 +2518,21 @@ exports[`Datagrid Snapshot Tests > should match snapshot with empty data 1`] = ` style="max-height: 100%; height: 100%;" > - +
name age @@ -762,27 +2566,25 @@ exports[`Datagrid Snapshot Tests > should match snapshot with expandable rows 1` style="max-height: 100%; height: 100%;" > - + + + + +
name age @@ -790,27 +2592,27 @@ exports[`Datagrid Snapshot Tests > should match snapshot with expandable rows 1`
John Doe @@ -837,11 +2640,12 @@ exports[`Datagrid Snapshot Tests > should match snapshot with expandable rows 1`
30 @@ -852,21 +2656,21 @@ exports[`Datagrid Snapshot Tests > should match snapshot with expandable rows 1`
+
+
+ Jane Smith +
+
+ 		+
+
+ 25 +
+
+
+ +`; + +exports[`Datagrid Snapshot Tests > should match snapshot with filters enabled 1`] = ` +
+ + + + + + + + + + + + + +
+ name + + age +
+
+
+ John Doe +
+
+ 		+
+
+ 30 +
+
+
Jane Smith @@ -893,11 +2798,12 @@ exports[`Datagrid Snapshot Tests > should match snapshot with expandable rows 1`
25 @@ -910,29 +2816,27 @@ exports[`Datagrid Snapshot Tests > should match snapshot with expandable rows 1`
`; -exports[`Datagrid Snapshot Tests > should match snapshot with filters enabled 1`] = ` +exports[`Datagrid Snapshot Tests > should match snapshot with large size 1`] = `
- +
name age @@ -940,20 +2844,21 @@ exports[`Datagrid Snapshot Tests > should match snapshot with filters enabled 1`
John Doe @@ -961,11 +2866,12 @@ exports[`Datagrid Snapshot Tests > should match snapshot with filters enabled 1`
30 @@ -976,14 +2882,15 @@ exports[`Datagrid Snapshot Tests > should match snapshot with filters enabled 1`
Jane Smith @@ -991,11 +2898,12 @@ exports[`Datagrid Snapshot Tests > should match snapshot with filters enabled 1`
25 @@ -1014,23 +2922,21 @@ exports[`Datagrid Snapshot Tests > should match snapshot with loading state 1`] style="max-height: 100%; height: 100%;" > - +
name age @@ -1038,20 +2944,21 @@ exports[`Datagrid Snapshot Tests > should match snapshot with loading state 1`]
John Doe @@ -1059,11 +2966,12 @@ exports[`Datagrid Snapshot Tests > should match snapshot with loading state 1`]
30 @@ -1074,14 +2982,15 @@ exports[`Datagrid Snapshot Tests > should match snapshot with loading state 1`]
Jane Smith @@ -1089,11 +2998,12 @@ exports[`Datagrid Snapshot Tests > should match snapshot with loading state 1`]
25 @@ -1426,29 +3336,127 @@ exports[`Datagrid Snapshot Tests > should match snapshot with loading state 1`]
`; -exports[`Datagrid Snapshot Tests > should match snapshot with pagination 1`] = ` +exports[`Datagrid Snapshot Tests > should match snapshot with medium size 1`] = `
+ + + + + + + + + + + + + + +
+ name + + age +
+
+
+ John Doe +
+
+ 		+
+
+ 30 +
+
+
+
+
+ Jane Smith +
+
+ 		+
+
+ 25 +
+
+
+
+`; + +exports[`Datagrid Snapshot Tests > should match snapshot with pagination 1`] = ` +
+ + +
name age @@ -1456,20 +3464,21 @@ exports[`Datagrid Snapshot Tests > should match snapshot with pagination 1`] = `
John Doe @@ -1477,11 +3486,12 @@ exports[`Datagrid Snapshot Tests > should match snapshot with pagination 1`] = `
30 @@ -1492,14 +3502,15 @@ exports[`Datagrid Snapshot Tests > should match snapshot with pagination 1`] = `
Jane Smith @@ -1507,11 +3518,12 @@ exports[`Datagrid Snapshot Tests > should match snapshot with pagination 1`] = `
25 @@ -1530,18 +3542,16 @@ exports[`Datagrid Snapshot Tests > should match snapshot with row selection 1`] style="max-height: 100%; height: 100%;" > - +
name age @@ -1616,20 +3626,21 @@ exports[`Datagrid Snapshot Tests > should match snapshot with row selection 1`]
John Doe @@ -1703,11 +3715,12 @@ exports[`Datagrid Snapshot Tests > should match snapshot with row selection 1`]
30 @@ -1718,14 +3731,15 @@ exports[`Datagrid Snapshot Tests > should match snapshot with row selection 1`]
Jane Smith @@ -1799,11 +3814,12 @@ exports[`Datagrid Snapshot Tests > should match snapshot with row selection 1`]
25 @@ -1822,23 +3838,121 @@ exports[`Datagrid Snapshot Tests > should match snapshot with search enabled 1`] style="max-height: 100%; height: 100%;" > + + + + + + + + + + + + + + +
+ name + + age +
+
+
+ John Doe +
+
+ 		+
+
+ 30 +
+
+
+
+
+ Jane Smith +
+
+ 		+
+
+ 25 +
+
+
+
+`; + +exports[`Datagrid Snapshot Tests > should match snapshot with small size 1`] = ` +
+ + + ({ {rowVirtualizer.getVirtualItems().map((virtualRow) => { const row = rows[virtualRow?.index]; if (!row) return null; - - const offset = renderSubComponent ? getOffset(virtualRow.index) : 0; - + const offset = renderSubComponent ? getOffset(virtualRow?.index) : 0; return ( ({ {row.getVisibleCells().map((cell) => ( @@ -116,7 +116,7 @@ export const TableBody = ({ offset={offset} renderSubComponent={renderSubComponent} subComponentHeight={subComponentHeight} - maxRowHeight={maxRowHeight} + maxRowHeight={virtualRow?.size ?? maxRowHeight} /> )} diff --git a/packages/manager-ui-kit/src/components/datagrid/table/table-body/sub-row/SubRow.component.tsx b/packages/manager-ui-kit/src/components/datagrid/table/table-body/sub-row/SubRow.component.tsx index 34bbbe058731..775c8d61ec0c 100644 --- a/packages/manager-ui-kit/src/components/datagrid/table/table-body/sub-row/SubRow.component.tsx +++ b/packages/manager-ui-kit/src/components/datagrid/table/table-body/sub-row/SubRow.component.tsx @@ -13,20 +13,17 @@ export const SubRow = ({ -
+
); diff --git a/packages/manager-ui-kit/src/components/datagrid/table/table-head/table-header-content/TableHeaderContent.component.tsx b/packages/manager-ui-kit/src/components/datagrid/table/table-head/table-header-content/TableHeaderContent.component.tsx index 8ea94e66b26c..61865925a54e 100644 --- a/packages/manager-ui-kit/src/components/datagrid/table/table-head/table-header-content/TableHeaderContent.component.tsx +++ b/packages/manager-ui-kit/src/components/datagrid/table/table-head/table-header-content/TableHeaderContent.component.tsx @@ -13,11 +13,11 @@ const TableHeaderContentComponent = ({ }: TableHeaderContentProps) => ( {headerGroups?.map((headerGroup) => ( - + {headerGroup.headers.map((header) => (
name age @@ -1846,20 +3960,21 @@ exports[`Datagrid Snapshot Tests > should match snapshot with search enabled 1`]
John Doe @@ -1867,11 +3982,12 @@ exports[`Datagrid Snapshot Tests > should match snapshot with search enabled 1`]
30 @@ -1882,14 +3998,15 @@ exports[`Datagrid Snapshot Tests > should match snapshot with search enabled 1`]
Jane Smith @@ -1897,11 +4014,12 @@ exports[`Datagrid Snapshot Tests > should match snapshot with search enabled 1`]
25 @@ -1920,17 +4038,15 @@ exports[`Datagrid Snapshot Tests > should match snapshot with sorting enabled 1` style="max-height: 100%; height: 100%;" > - + + + + + +
should match snapshot with sorting enabled 1`
should match snapshot with sorting enabled 1`
Jane Smith @@ -1997,11 +4114,12 @@ exports[`Datagrid Snapshot Tests > should match snapshot with sorting enabled 1`
25 @@ -2012,14 +4130,83 @@ exports[`Datagrid Snapshot Tests > should match snapshot with sorting enabled 1`
+
+
+ John Doe +
+
+ 		+
+
+ 30 +
+
+
+
+`; + +exports[`Datagrid Snapshot Tests > should match snapshot with striped variant 1`] = ` +
+ + + + + + + + + + + + +
+ name + + age +
John Doe @@ -2027,11 +4214,12 @@ exports[`Datagrid Snapshot Tests > should match snapshot with sorting enabled 1`
30 @@ -2039,6 +4227,38 @@ exports[`Datagrid Snapshot Tests > should match snapshot with sorting enabled 1`
+
+
+ Jane Smith +
+
+ 		+
+
+ 25 +
+
+
diff --git a/packages/manager-ui-kit/src/components/datagrid/builder/TableBuilderProps.props.ts b/packages/manager-ui-kit/src/components/datagrid/builder/TableBuilderProps.props.ts index c3edd568f366..badf77cb451d 100644 --- a/packages/manager-ui-kit/src/components/datagrid/builder/TableBuilderProps.props.ts +++ b/packages/manager-ui-kit/src/components/datagrid/builder/TableBuilderProps.props.ts @@ -2,6 +2,8 @@ import { JSX, MutableRefObject } from 'react'; import type { ColumnDef, ColumnSort, Row, VisibilityState } from '@tanstack/react-table'; +import { TABLE_SIZE } from '@ovhcloud/ods-react'; + import { ExpandableRow, ExpandedProps, @@ -24,4 +26,5 @@ export type TableBuilderProps> = { rowSelection?: RowSelectionProps | null; setColumnVisibility: (columnVisibility: VisibilityState) => void; sorting: ColumnSort[]; + size: TABLE_SIZE; }; diff --git a/packages/manager-ui-kit/src/components/datagrid/builder/TableHeaderBuilder.tsx b/packages/manager-ui-kit/src/components/datagrid/builder/TableHeaderBuilder.tsx index eebca79d230d..0d5003ac5ae0 100644 --- a/packages/manager-ui-kit/src/components/datagrid/builder/TableHeaderBuilder.tsx +++ b/packages/manager-ui-kit/src/components/datagrid/builder/TableHeaderBuilder.tsx @@ -7,25 +7,35 @@ import { CheckboxControl, ICON_NAME, Icon, + TABLE_SIZE, } from '@ovhcloud/ods-react'; import { Button } from '@/components/button/Button.component'; import type { ExpandedProps } from '@/components/datagrid/Datagrid.props'; -export const getExpandable = (expandable: ExpandedProps) => ({ +const ROW_SIZE = 30; + +const SIZE_TO_BUTTON_SIZE: Record = { + [TABLE_SIZE.sm]: BUTTON_SIZE.xs, + [TABLE_SIZE.md]: BUTTON_SIZE.sm, + [TABLE_SIZE.lg]: BUTTON_SIZE.md, +}; + +export const getExpandable = (expandable: ExpandedProps, size: TABLE_SIZE) => ({ cell: ({ row }: { row: Row }) => { + const ButtonSize = SIZE_TO_BUTTON_SIZE[size] ?? BUTTON_SIZE.md; return row.getCanExpand() ? (
{expandable && row.depth ? null : ( @@ -36,7 +46,8 @@ export const getExpandable = (expandable: ExpandedProps) => ({ enableHiding: false, enableResizing: true, id: 'expander', - maxSize: 20, + maxSize: ROW_SIZE, + minSize: ROW_SIZE, }); export const getRowSelection = () => ({ @@ -64,5 +75,6 @@ export const getRowSelection = () => ({ ), id: 'select', - maxSize: 20, + maxSize: ROW_SIZE, + minSize: ROW_SIZE, }); diff --git a/packages/manager-ui-kit/src/components/datagrid/builder/useTableBuilder.ts b/packages/manager-ui-kit/src/components/datagrid/builder/useTableBuilder.ts index 08b5816025cd..373e67c3b595 100644 --- a/packages/manager-ui-kit/src/components/datagrid/builder/useTableBuilder.ts +++ b/packages/manager-ui-kit/src/components/datagrid/builder/useTableBuilder.ts @@ -19,6 +19,7 @@ export const useTableBuilder = >({ rowSelection, setColumnVisibility, sorting, + size, }: TableBuilderProps) => { const params: Partial> = {}; const builder = { @@ -29,7 +30,7 @@ export const useTableBuilder = >({ cols = [getRowSelection(), ...cols]; } if ((hasExpandableFeature && expandable) || renderSubComponent) { - cols = [getExpandable(expandable), ...cols]; + cols = [getExpandable(expandable, size), ...cols]; } params.columns = cols; return builder; diff --git a/packages/manager-ui-kit/src/components/datagrid/table/table-body/TableBody.component.tsx b/packages/manager-ui-kit/src/components/datagrid/table/table-body/TableBody.component.tsx index c1c883ed04b0..43b5e35007bc 100644 --- a/packages/manager-ui-kit/src/components/datagrid/table/table-body/TableBody.component.tsx +++ b/packages/manager-ui-kit/src/components/datagrid/table/table-body/TableBody.component.tsx @@ -41,16 +41,15 @@ export const TableBody = ({ } }, [rows?.length]); - const EXPANDED_SIZE = subComponentHeight; const getOffset = useCallback( (index: number) => { let count = 0; for (let i = 0; i < index; i += 1) { if (rows[i]?.getIsExpanded()) count += 1; } - return count * EXPANDED_SIZE; + return count * subComponentHeight; }, - [rows], + [subComponentHeight], ); const totalHeight = useMemo(() => { @@ -67,7 +66,7 @@ export const TableBody = ({ return (
({ borderTop: 'none', }} > -
+
{flexRender(cell.column.columnDef.cell, cell.getContext())}
{renderSubComponent(row)} - +
> = { rowSelection?: RowSelectionProps | null; setColumnVisibility?: (columnVisibility: VisibilityState) => void; sorting?: ColumnSort[]; + sizeRow?: TABLE_SIZE; }; diff --git a/packages/manager-ui-kit/src/components/datagrid/useDatagrid.tsx b/packages/manager-ui-kit/src/components/datagrid/useDatagrid.tsx index 7308849787ae..8688004c6841 100644 --- a/packages/manager-ui-kit/src/components/datagrid/useDatagrid.tsx +++ b/packages/manager-ui-kit/src/components/datagrid/useDatagrid.tsx @@ -2,6 +2,8 @@ import { useMemo } from 'react'; import { useReactTable } from '@tanstack/react-table'; +import { TABLE_SIZE } from '@ovhcloud/ods-react'; + import { ExpandableRow } from '@/components/datagrid/Datagrid.props'; import { useTableBuilder } from './builder/useTableBuilder'; @@ -16,6 +18,7 @@ export const useDatagrid = >({ onSortChange, renderSubComponent, rowSelection, + sizeRow, setColumnVisibility, sorting, }: UseDatagridTableProps) => { @@ -45,6 +48,7 @@ export const useDatagrid = >({ rowSelection, setColumnVisibility: setColumnVisibility ?? (() => {}), sorting: sorting ?? [], + size: sizeRow ?? TABLE_SIZE.md, }) .setColumns() .setColumnsVisibility() diff --git a/packages/manager-wiki/stories/manager-ui-kit/components/Datagrid/datagrid.stories.tsx b/packages/manager-wiki/stories/manager-ui-kit/components/Datagrid/datagrid.stories.tsx index cd9f898ac84e..7ffaa3aedde3 100644 --- a/packages/manager-wiki/stories/manager-ui-kit/components/Datagrid/datagrid.stories.tsx +++ b/packages/manager-wiki/stories/manager-ui-kit/components/Datagrid/datagrid.stories.tsx @@ -7,6 +7,8 @@ import { Icon, ICON_NAME, Input, + TABLE_SIZE, + TABLE_VARIANT, } from '@ovhcloud/ods-react'; import { Datagrid, DatagridProps, useColumnFilters } from '@ovh-ux/muk'; import { @@ -121,6 +123,8 @@ const DatagridStory = (args: DatagridProps) => { subComponentHeight, maxRowHeight, isLoading, + size, + variant, totalCount, topbar, } = args; @@ -196,6 +200,8 @@ const DatagridStory = (args: DatagridProps) => { {}, + onFetchAllPages: () => {}, +}; + + + +export const Variant = DatagridStory.bind({}); + +Variant.args = { + columns, + data, + variant: TABLE_VARIANT.striped, +}; + + + export const Sorting = DatagridStory.bind({}); Sorting.args = { @@ -339,6 +368,7 @@ SubComponent.args = { ), subComponentHeight: 80, + size: TABLE_SIZE.md, }; export const Expandable = DatagridStory.bind({}); @@ -472,6 +502,16 @@ const meta = { }, args: {}, argTypes: { + size: { + description: 'Controls the table row size', + control: 'select', + options: [TABLE_SIZE.sm, TABLE_SIZE.md, TABLE_SIZE.lg], + }, + variant: { + description: 'Controls the table variant style', + control: 'select', + options: [TABLE_VARIANT.default, TABLE_VARIANT.striped], + }, hasNextPage: { description: 'Controls whether pagination buttons are shown', control: 'boolean',