[MUK]: Add datagrid size and variant

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 = <T extends ExpandableRow<T>>({
+export const Datagrid = <T extends Record<string, unknown>>({
   autoScroll = true,
   columns,
   columnVisibility,
@@ -25,18 +22,22 @@ export const Datagrid = <T extends ExpandableRow<T>>({
   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<T>) => {
+  const rowHeight = RowHeight[size];
+  const DEFAULT_CONTAINER_HEIGHT = maxRowHeight || ContainerHeight[size];
   const {
     features,
     getHeaderGroups,
@@ -56,6 +57,7 @@ export const Datagrid = <T extends ExpandableRow<T>>({
     setColumnVisibility: columnVisibility?.setColumnVisibility,
     rowSelection,
     expandable,
+    sizeRow: size,
   });
   const { hasSortingFeature, hasSearchFeature, hasColumnVisibilityFeature, hasFilterFeature } =
     features;
@@ -71,6 +73,7 @@ export const Datagrid = <T extends ExpandableRow<T>>({
   };
   const shouldRenderTopbar =
     topbar || hasSearchFeature || hasFilterFeature || hasColumnVisibilityFeature;
+
   return (
     <>
       {shouldRenderTopbar && (
@@ -91,7 +94,7 @@ export const Datagrid = <T extends ExpandableRow<T>>({
         />
       )}
       <div className="overflow-auto relative w-full" ref={tableContainerRef} style={containerStyle}>
-        <Table className="table table-fixed w-full">
+        <Table size={size} variant={variant}>
           <TableHeaderContent<T>
             headerGroups={headerGroups}
             onSortChange={sorting?.setSorting}
@@ -107,7 +110,7 @@ export const Datagrid = <T extends ExpandableRow<T>>({
             isLoading={isLoading ?? false}
             renderSubComponent={renderSubComponent}
             subComponentHeight={subComponentHeight}
-            maxRowHeight={maxRowHeight}
+            maxRowHeight={rowHeight}
             contentAlignLeft={contentAlignLeft}
           />
         </Table>

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<T extends ExpandableRow<T>> = {
   rowSelection?: RowSelectionProps<T>;
   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<T> = ColumnDef<T> & {
+export enum RowHeight {
+  sm = 32.5,
+  md = 48.5,
+  lg = 64.5,
+}
+
+export enum ContainerHeight {
+  sm = 375,
+  md = 550,
+  lg = 725,
+}
+
 export type DatagridColumn<T> = ColumnDef<T> & {
   /** set column comparator for the filter */
   comparator?: FilterComparator[];

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';
@@ -171,4 +173,40 @@ describe('Datagrid Snapshot Tests', () => {
     });
     expect(container.firstChild).toMatchSnapshot();
   });
+
+  it('should match snapshot with small size', () => {
+    const { container } = renderDataGrid({
+      columns: mockBasicColumns,
+      data: mockData,
+      size: TABLE_SIZE.sm,
+    });
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should match snapshot with medium size', () => {
+    const { container } = renderDataGrid({
+      columns: mockBasicColumns,
+      data: mockData,
+      size: TABLE_SIZE.md,
+    });
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should match snapshot with large size', () => {
+    const { container } = renderDataGrid({
+      columns: mockBasicColumns,
+      data: mockData,
+      size: TABLE_SIZE.lg,
+    });
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should match snapshot with striped variant', () => {
+    const { container } = renderDataGrid({
+      columns: mockBasicColumns,
+      data: mockData,
+      variant: TABLE_VARIANT.striped,
+    });
+    expect(container.firstChild).toMatchSnapshot();
+  });
 });

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 = <div data-testid="custom-topbar">Custom Topbar</div>;