@onewelcome/react-lib-components 0.1.7-alpha → 0.1.10-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onewelcome/react-lib-components",
-  "version": "0.1.7-alpha",
+  "version": "0.1.10-alpha",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/index.js",
@@ -34,7 +34,7 @@
     "react": ">=16"
   },
   "engines": {
-    "node": ">=12"
+    "node": ">=16"
   },
   "size-limit": [
     {
@@ -49,16 +49,16 @@
   "devDependencies": {
     "@babel/core": "^7.18.0",
     "@size-limit/preset-small-lib": "^7.0.8",
-    "@storybook/addon-a11y": "^6.5.3",
-    "@storybook/addon-docs": "^6.5.3",
-    "@storybook/addon-essentials": "^6.5.3",
-    "@storybook/addon-links": "^6.5.3",
-    "@storybook/addons": "^6.5.3",
-    "@storybook/builder-webpack5": "^6.5.3",
-    "@storybook/manager-webpack5": "^6.5.3",
+    "@storybook/addon-a11y": "^6.5.9",
+    "@storybook/addon-docs": "^6.5.9",
+    "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/addon-links": "^6.5.9",
+    "@storybook/addons": "^6.5.9",
+    "@storybook/builder-webpack5": "^6.5.9",
+    "@storybook/manager-webpack5": "^6.5.9",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^6.5.3",
-    "@storybook/theming": "^6.5.6",
+    "@storybook/react": "^6.5.9",
+    "@storybook/theming": "^6.5.9",
     "@testing-library/dom": "^8.13.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.1.5",
@@ -70,8 +70,6 @@
     "@types/mdx": "^2.0.2",
     "@types/react": "^17.0.45",
     "@types/react-dom": "^17.0.17",
-    "@types/react-router": "^5.1.18",
-    "@types/react-router-dom": "^5.3.3",
     "babel-loader": "^8.2.5",
     "dts-cli": "^1.5.1",
     "html-webpack-plugin": "^5.5.0",

package/src/ContextMenu/ContextMenu.tsx

@@ -63,7 +63,22 @@ export const ContextMenu = React.forwardRef<HTMLDivElement, Props>(
         setFocusedContextMenuItem(selectedContextMenuItem);
       }
 
-      event.preventDefault();
+      const codesToPrevenDefault = [
+        'ArrowDown',
+        'ArrowUp',
+        'ArrowLeft',
+        'ArrowRight',
+        'Enter',
+        'Space',
+        'Escape',
+        'End',
+        'Home',
+      ];
+
+      if (codesToPrevenDefault.includes(event.code)) {
+        event.preventDefault();
+      }
+
       switch (event.code) {
         case 'ArrowDown':
           if (!showContextMenu) {

package/src/DataGrid/DataGrid.module.scss

@@ -0,0 +1,25 @@
+.grid-wrapper {
+  padding: 1rem 0;
+}
+
+.table-wrapper {
+  overflow-x: auto;
+}
+
+.table {
+  border-collapse: collapse;
+  padding-top: 0.5rem;
+  width: 100%;
+  position: relative;
+}
+
+.pagination {
+  margin-top: 1rem;
+  padding: 0 1rem;
+}
+
+@media only screen and (min-width: 50em) {
+  .pagination {
+    padding: 0 1.25rem;
+  }
+}

package/src/DataGrid/DataGrid.test.tsx

@@ -0,0 +1,421 @@
+import React, { useEffect, useRef } from 'react';
+import { DataGrid, Props } from './DataGrid';
+import { getAllByRole, render, queryAllByRole, getByRole } from '@testing-library/react';
+import { DataGridRow } from './DataGridBody/DataGridRow';
+import { DataGridCell } from './DataGridBody/DataGridCell';
+import { ContextMenu } from '../ContextMenu/ContextMenu';
+import { IconButton } from '../Button/IconButton';
+import { Icon, Icons } from '../Icon/Icon';
+import { ContextMenuItem } from '../ContextMenu/ContextMenuItem';
+import userEvent from '@testing-library/user-event';
+
+type DataType = { firstName: string; lastName: string; date: string };
+
+const defaultParams: Props<DataType> = {
+  children: ({ item }) => (
+    <DataGridRow key={item.firstName}>
+      <DataGridCell>{item.firstName}</DataGridCell>
+      <DataGridCell>{item.lastName}</DataGridCell>
+      <DataGridCell>{item.date}</DataGridCell>
+      <DataGridCell>
+        <ContextMenu
+          id={`consent_menu_${item.firstName}`}
+          trigger={
+            <IconButton title={`Actions for ${item.firstName}`} color="default">
+              <Icon icon={Icons.EllipsisAlt} />
+            </IconButton>
+          }
+        >
+          <ContextMenuItem>Item 1</ContextMenuItem>
+        </ContextMenu>
+      </DataGridCell>
+    </DataGridRow>
+  ),
+  headers: [
+    { name: 'firstName', headline: 'First name' },
+    { name: 'lastName', headline: 'Last name' },
+    { name: 'date', headline: 'Date' },
+  ],
+  enableMultiSorting: true,
+  data: [
+    { firstName: 'Paweł', lastName: 'Napieracz', date: '12.12.1990' },
+    { firstName: 'Michał', lastName: 'Górski', date: '12.12.1994' },
+    { firstName: 'Daniel', lastName: 'Velden', date: '12.12.199x' },
+    { firstName: 'Jasha', lastName: 'Joachimsthal', date: '12.12.198x' },
+  ],
+};
+
+const createDataGrid = (params?: (defaultParams: Props<DataType>) => Props<DataType>) => {
+  let parameters = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(<DataGrid {...parameters} data-testid="dataGrid" />);
+  const dataGrid = queries.getByTestId('dataGrid');
+
+  return {
+    ...queries,
+    dataGrid,
+  };
+};
+
+describe('DataGrid should render', () => {
+  it('renders without crashing', () => {
+    const rowsCount = defaultParams.data?.length!;
+    const colsCount = defaultParams.headers?.length!;
+    const contextMenuCellCount = 1;
+    const { dataGrid, ...queries } = createDataGrid();
+
+    expect(dataGrid).toBeDefined();
+
+    expect(dataGrid.querySelector('.actions')).toBeNull();
+
+    const [thead, tbody] = queries.getAllByRole('rowgroup');
+
+    expect(queryAllByRole(thead, 'columnheader')).toHaveLength(3);
+    expect(queryAllByRole(thead, 'cell')).toHaveLength(contextMenuCellCount);
+    expect(queryAllByRole(thead, 'button')).toHaveLength(0); //sorting should be disabled by default
+
+    expect(queryAllByRole(tbody, 'cell')).toHaveLength(
+      rowsCount * (colsCount + contextMenuCellCount)
+    );
+  });
+
+  it('renders actions buttons', () => {
+    const { dataGrid } = createDataGrid((params) => ({
+      ...params,
+      actions: {
+        enableAddBtn: true,
+        enableColumnsBtn: true,
+        enableSearchBtn: true,
+      },
+    }));
+    const [addBtn, desktopColumnsBtn, mobileColumnsBtn, desktopSearchBtn, mobileSearchBtn] =
+      getAllByRole(dataGrid.querySelector('.actions')!, 'button');
+    expect(addBtn).toHaveTextContent('Add item');
+    expect(desktopColumnsBtn).toHaveTextContent('Columns');
+    expect(mobileColumnsBtn).toHaveTextContent('Show/hide columns');
+    expect(desktopSearchBtn).toHaveTextContent('Search');
+    expect(mobileSearchBtn).toHaveTextContent('Search');
+  });
+
+  it('renders table with initialized sorting indicators', () => {
+    const { getAllByRole } = createDataGrid((params) => ({
+      ...params,
+      onSort: jest.fn(),
+      initialSort: [
+        { name: defaultParams.headers[0].name, direction: 'DESC' },
+        { name: defaultParams.headers[2].name, direction: 'ASC' },
+      ],
+    }));
+
+    const [firstNameHeader, lastNameHeader, dateHeader] = getAllByRole('columnheader');
+    expect(firstNameHeader).toHaveAttribute('aria-sort', 'descending');
+    expect(lastNameHeader).not.toHaveAttribute('aria-sort');
+    expect(dateHeader).toHaveAttribute('aria-sort', 'ascending');
+  });
+
+  it('renders table without context menu', () => {
+    const rowsCount = defaultParams.data?.length!;
+    const colsCount = defaultParams.headers?.length!;
+    const { getAllByRole } = createDataGrid((params) => ({
+      ...params,
+      disableContextMenuColumn: true,
+      children: ({ item }) => (
+        <DataGridRow key={item.firstName}>
+          <DataGridCell>{item.firstName}</DataGridCell>
+          <DataGridCell>{item.lastName}</DataGridCell>
+          <DataGridCell>{item.date}</DataGridCell>
+        </DataGridRow>
+      ),
+    }));
+
+    expect(getAllByRole('columnheader')).toHaveLength(3);
+    expect(getAllByRole('cell')).toHaveLength(rowsCount * colsCount);
+  });
+
+  it('renders loading state with skeleton loading animation on data cells and empty row on content menu cells', () => {
+    const { ...queries } = createDataGrid((params) => ({ ...params, isLoading: true }));
+
+    const [_thead, tbody] = queries.getAllByRole('rowgroup');
+    expect(
+      getAllByRole(tbody, 'cell').find((cell, index) => {
+        const contextMenuCell = index % 4 === 3;
+        return (
+          !contextMenuCell && (cell.firstChild as HTMLElement).getAttribute('class') !== 'loading'
+        );
+      })
+    ).toBeUndefined();
+  });
+
+  it('renders empty state', () => {
+    const emptyLabel = 'emptyLabel';
+    const { ...queries } = createDataGrid((params) => ({ ...params, emptyLabel, data: [] }));
+
+    const [_thead, tbody] = queries.getAllByRole('rowgroup');
+    const rows = getAllByRole(tbody, 'row');
+    const firstRowCells = getAllByRole(rows[0], 'cell');
+    expect(firstRowCells).toHaveLength(1);
+    expect(firstRowCells[0]).toHaveAttribute('colspan', `${defaultParams.headers.length + 1}`);
+    expect(firstRowCells[0]).toHaveTextContent(emptyLabel);
+  });
+
+  it('renders pagination', () => {
+    const { getByRole } = createDataGrid((params) => ({
+      ...params,
+      paginationProps: {
+        totalElements: 105,
+        pageSize: 10,
+        currentPage: 2,
+        onPageChange: jest.fn(),
+        onPageSizeChange: jest.fn(),
+      },
+    }));
+
+    expect(getByRole('button', { name: 'previous' })).toBeDefined();
+    expect(getByRole('button', { name: 'next' })).toBeDefined();
+    expect(getByRole('button', { name: 'last' })).toBeDefined();
+  });
+});
+
+describe('DataGrid should have interactive table header', () => {
+  it('clicking table headers should call sort callback', () => {
+    const onSort = jest.fn();
+    const { getAllByRole } = createDataGrid((params) => ({
+      ...params,
+      onSort,
+    }));
+
+    const [firstNameHeader, lastNameHeader, dateHeader] = getAllByRole('columnheader');
+
+    userEvent.click(getByRole(firstNameHeader, 'button'));
+    expect(onSort).toBeCalledWith([{ name: defaultParams.headers[0].name, direction: 'ASC' }]);
+
+    userEvent.click(getByRole(lastNameHeader, 'button'));
+    userEvent.click(getByRole(dateHeader, 'button'));
+    expect(onSort).toBeCalledWith([
+      { name: defaultParams.headers[2].name, direction: 'ASC' },
+      { name: defaultParams.headers[1].name, direction: 'ASC' },
+      { name: defaultParams.headers[0].name, direction: 'ASC' },
+    ]);
+
+    userEvent.click(getByRole(firstNameHeader, 'button'));
+    expect(onSort).toBeCalledWith([
+      { name: defaultParams.headers[0].name, direction: 'DESC' },
+      { name: defaultParams.headers[2].name, direction: 'ASC' },
+      { name: defaultParams.headers[1].name, direction: 'ASC' },
+    ]);
+
+    userEvent.click(getByRole(dateHeader, 'button'));
+    expect(onSort).toBeCalledWith([
+      { name: defaultParams.headers[2].name, direction: 'DESC' },
+      { name: defaultParams.headers[0].name, direction: 'DESC' },
+      { name: defaultParams.headers[1].name, direction: 'ASC' },
+    ]);
+
+    userEvent.click(getByRole(dateHeader, 'button'));
+    userEvent.click(getByRole(firstNameHeader, 'button'));
+    userEvent.click(getByRole(lastNameHeader, 'button'));
+    expect(onSort).toBeCalledWith([{ name: defaultParams.headers[1].name, direction: 'DESC' }]);
+    expect(onSort).toBeCalledTimes(8);
+  });
+
+  it('clicking on show/hide columns popover should show/hide columns', async () => {
+    const { getByRole, findByLabelText, ...queries } = createDataGrid((params) => ({
+      ...params,
+      actions: { enableColumnsBtn: true },
+    }));
+    expect(queries.getAllByRole('columnheader')).toHaveLength(3);
+
+    userEvent.click(getByRole('button', { name: 'Columns' }));
+
+    const nameToggle = await findByLabelText(defaultParams.headers[1].headline);
+    expect(nameToggle).toBeChecked();
+    userEvent.click(nameToggle);
+    expect(nameToggle).not.toBeChecked();
+    expect(getByRole('button', { name: 'Close show columns dialog' })).toBeDefined();
+
+    const columns = queries.getAllByRole('columnheader');
+    expect(columns).toHaveLength(2);
+    expect(columns[0]).toHaveTextContent(defaultParams.headers[0].headline);
+    expect(columns[1]).toHaveTextContent(defaultParams.headers[2].headline);
+
+    const rowsCount = defaultParams.data?.length!;
+    const colsCount = defaultParams.headers.length;
+    const hiddenColsCount = defaultParams.headers.length;
+    const contextMenuColsCount = defaultParams.headers.length;
+    const [_thead, tbody] = queries.getAllByRole('rowgroup');
+    expect(getAllByRole(tbody, 'cell')).toHaveLength(
+      rowsCount * (colsCount - hiddenColsCount + contextMenuColsCount)
+    );
+  });
+});
+
+describe('ref should work', () => {
+  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+    const ExampleComponent = ({
+      propagateRef,
+    }: {
+      propagateRef: (ref: React.RefObject<HTMLElement>) => void;
+    }) => {
+      const ref = useRef(null);
+
+      useEffect(() => {
+        propagateRef(ref);
+      }, [ref]);
+
+      return <DataGrid {...defaultParams} data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});
+
+describe('spacing should work correctly', () => {
+  it('gives the proper paddings to the right elements', () => {
+    const { dataGrid } = createDataGrid((defaultParams) => ({
+      ...defaultParams,
+      spacing: { padding: 4 },
+      paginationProps: {
+        totalElements: 105,
+        pageSize: 10,
+        currentPage: 2,
+        onPageChange: jest.fn(),
+        onPageSizeChange: jest.fn(),
+      },
+    }));
+
+    const firstHeaderCell = dataGrid.querySelector('.table .thead .row .header-cell');
+    const lastHeaderCell = dataGrid.querySelector('.table .thead .row td');
+    const firstBodyCell = dataGrid.querySelector('.table tbody .row .cell');
+    const lastBodyCell = dataGrid.querySelector('.table tbody .row td:last-of-type');
+    const pagination = dataGrid.querySelector('.pagination-wrapper');
+
+    expect(dataGrid).toHaveStyle({ 'padding-top': '1rem', 'padding-bottom': '1rem' });
+    expect(firstHeaderCell).toHaveStyle({ 'padding-left': '1rem' });
+    expect(lastHeaderCell).toHaveStyle({ 'padding-right': '1rem' });
+    expect(firstBodyCell).toHaveStyle({ 'padding-left': '1rem' });
+    expect(lastBodyCell).toHaveStyle({ 'padding-right': '1rem' });
+    expect(pagination).toHaveStyle({ 'padding-left': '1rem', 'padding-right': '1rem' });
+  });
+
+  it('gives the proper paddings to the right elements', () => {
+    const { dataGrid } = createDataGrid((defaultParams) => ({
+      ...defaultParams,
+      spacing: { padding: '4 5' },
+      paginationProps: {
+        totalElements: 105,
+        pageSize: 10,
+        currentPage: 2,
+        onPageChange: jest.fn(),
+        onPageSizeChange: jest.fn(),
+      },
+    }));
+
+    const firstHeaderCell = dataGrid.querySelector('.table .thead .row .header-cell');
+    const lastHeaderCell = dataGrid.querySelector('.table .thead .row td');
+    const firstBodyCell = dataGrid.querySelector('.table tbody .row .cell');
+    const lastBodyCell = dataGrid.querySelector('.table tbody .row td:last-of-type');
+    const pagination = dataGrid.querySelector('.pagination-wrapper');
+
+    expect(dataGrid).toHaveStyle({ 'padding-top': '1rem', 'padding-bottom': '1rem' });
+    expect(firstHeaderCell).toHaveStyle({ 'padding-left': '1.25rem' });
+    expect(lastHeaderCell).toHaveStyle({ 'padding-right': '1.25rem' });
+    expect(firstBodyCell).toHaveStyle({ 'padding-left': '1.25rem' });
+    expect(lastBodyCell).toHaveStyle({ 'padding-right': '1.25rem' });
+    expect(pagination).toHaveStyle({ 'padding-left': '1.25rem', 'padding-right': '1.25rem' });
+  });
+
+  it('gives the proper paddings to the right elements', () => {
+    const { dataGrid } = createDataGrid((defaultParams) => ({
+      ...defaultParams,
+      spacing: { padding: '4 5 8' },
+      paginationProps: {
+        totalElements: 105,
+        pageSize: 10,
+        currentPage: 2,
+        onPageChange: jest.fn(),
+        onPageSizeChange: jest.fn(),
+      },
+    }));
+
+    const firstHeaderCell = dataGrid.querySelector('.table .thead .row .header-cell');
+    const lastHeaderCell = dataGrid.querySelector('.table .thead .row td');
+    const firstBodyCell = dataGrid.querySelector('.table tbody .row .cell');
+    const lastBodyCell = dataGrid.querySelector('.table tbody .row td:last-of-type');
+    const pagination = dataGrid.querySelector('.pagination-wrapper');
+
+    expect(dataGrid).toHaveStyle({ 'padding-top': '1rem', 'padding-bottom': '2rem' });
+    expect(firstHeaderCell).toHaveStyle({ 'padding-left': '1.25rem' });
+    expect(lastHeaderCell).toHaveStyle({ 'padding-right': '1.25rem' });
+    expect(firstBodyCell).toHaveStyle({ 'padding-left': '1.25rem' });
+    expect(lastBodyCell).toHaveStyle({ 'padding-right': '1.25rem' });
+    expect(pagination).toHaveStyle({ 'padding-left': '1.25rem', 'padding-right': '1.25rem' });
+  });
+
+  it('gives the proper paddings to the right elements', () => {
+    const { dataGrid } = createDataGrid((defaultParams) => ({
+      ...defaultParams,
+      spacing: { padding: '6 4 8 8' },
+      paginationProps: {
+        totalElements: 105,
+        pageSize: 10,
+        currentPage: 2,
+        onPageChange: jest.fn(),
+        onPageSizeChange: jest.fn(),
+      },
+    }));
+
+    const firstHeaderCell = dataGrid.querySelector('.table .thead .row .header-cell');
+    const lastHeaderCell = dataGrid.querySelector('.table .thead .row td');
+    const firstBodyCell = dataGrid.querySelector('.table tbody .row .cell');
+    const lastBodyCell = dataGrid.querySelector('.table tbody .row td:last-of-type');
+    const pagination = dataGrid.querySelector('.pagination-wrapper');
+
+    expect(dataGrid).toHaveStyle({ 'padding-top': '1.5rem', 'padding-bottom': '2rem' });
+    expect(firstHeaderCell).toHaveStyle({ 'padding-left': '2rem' });
+    expect(lastHeaderCell).toHaveStyle({ 'padding-right': '1rem' });
+    expect(firstBodyCell).toHaveStyle({ 'padding-left': '2rem' });
+    expect(lastBodyCell).toHaveStyle({ 'padding-right': '1rem' });
+    expect(pagination).toHaveStyle({ 'padding-left': '2rem', 'padding-right': '1rem' });
+  });
+
+  it('gives the proper paddings to the right elements, also with contextmenu disabled', () => {
+    const { dataGrid } = createDataGrid((defaultParams) => ({
+      ...defaultParams,
+      spacing: { padding: '6 4 8 8' },
+      disableContextMenuColumn: true,
+      paginationProps: {
+        totalElements: 105,
+        pageSize: 10,
+        currentPage: 2,
+        onPageChange: jest.fn(),
+        onPageSizeChange: jest.fn(),
+      },
+      children: ({ item }) => (
+        <DataGridRow key={item.firstName}>
+          <DataGridCell>{item.firstName}</DataGridCell>
+          <DataGridCell>{item.lastName}</DataGridCell>
+          <DataGridCell>{item.date}</DataGridCell>
+        </DataGridRow>
+      ),
+    }));
+
+    const firstHeaderCell = dataGrid.querySelector('.table .thead .row .header-cell');
+    const lastHeaderCell = dataGrid.querySelector('.table .thead .row th:last-of-type');
+    const firstBodyCell = dataGrid.querySelector('.table tbody .row .cell');
+    const lastBodyCell = dataGrid.querySelector('.table tbody .row td:last-of-type');
+    const pagination = dataGrid.querySelector('.pagination-wrapper');
+
+    expect(dataGrid).toHaveStyle({ 'padding-top': '1.5rem', 'padding-bottom': '2rem' });
+    expect(firstHeaderCell).toHaveStyle({ 'padding-left': '2rem' });
+    expect(lastHeaderCell).toHaveStyle({ 'padding-right': '1rem' });
+    expect(firstBodyCell).toHaveStyle({ 'padding-left': '2rem' });
+    expect(lastBodyCell).toHaveStyle({ 'padding-right': '1rem' });
+    expect(pagination).toHaveStyle({ 'padding-left': '2rem', 'padding-right': '1rem' });
+  });
+});

package/src/DataGrid/DataGrid.tsx

@@ -0,0 +1,157 @@
+import React, { ComponentPropsWithRef, ReactElement, Ref, useEffect, useState } from 'react';
+import { Props as ButtonProps } from '../Button/Button';
+import classes from './DataGrid.module.scss';
+import { DataGridHeader } from './DataGridHeader/DataGridHeader';
+import { DataGridActions } from './DataGridActions/DataGridActions';
+import { DataGridBody } from './DataGridBody/DataGridBody';
+import { ColumnName, HeaderCell, OnSortFunction, Sort } from './datagrid.interfaces';
+import { Pagination, Props as PaginationProps } from '../Pagination/Pagination';
+import { Spacing, useSpacing } from '../hooks/useSpacing';
+
+export interface Props<T> extends ComponentPropsWithRef<'div'> {
+  children: ({ item, index }: { item: T; index: number }) => ReactElement;
+  data?: T[];
+  initialSort?: Sort;
+  onSort?: OnSortFunction;
+  headers: HeaderCell[];
+  actions?: {
+    enableAddBtn?: boolean;
+    enableColumnsBtn?: boolean;
+    enableSearchBtn?: boolean;
+    addBtnProps?: ButtonProps;
+    columnsBtnProps?: ButtonProps;
+    searchBtnProps?: ButtonProps;
+  };
+  emptyLabel?: string;
+  paginationProps?: PaginationProps;
+  disableContextMenuColumn?: boolean;
+  isLoading?: boolean;
+  enableMultiSorting?: boolean;
+  spacing?: Spacing;
+}
+
+const DataGridInner = <T extends {}>(
+  {
+    children,
+    data,
+    initialSort,
+    onSort,
+    headers,
+    actions = {},
+    paginationProps,
+    disableContextMenuColumn,
+    isLoading,
+    enableMultiSorting,
+    emptyLabel,
+    spacing,
+    style,
+    ...rest
+  }: Props<T>,
+  ref: Ref<HTMLDivElement>
+) => {
+  if (!headers) {
+    throw new Error('Headers definition has to be provided');
+  }
+  if (!children) {
+    throw new Error('DataGridBody should be provieded with a template how to render rows');
+  }
+
+  const [internalHeaders, setInternalHeaders] = useState(headers);
+  const styleWithSpacing = useSpacing(spacing, style);
+
+  useEffect(() => setInternalHeaders(headers), [headers]);
+
+  const onColumnToggled = (colName: ColumnName) => {
+    setInternalHeaders(
+      internalHeaders.map((item) =>
+        item.name !== colName ? item : { ...item, hidden: !item.hidden }
+      )
+    );
+  };
+
+  if (styleWithSpacing?.padding) {
+    const splitPaddings = styleWithSpacing.padding.toString().split(' ');
+
+    let paddingLeftIndex: number = 0;
+
+    if (splitPaddings.length >= 2) {
+      paddingLeftIndex = 1;
+    }
+    if (splitPaddings.length === 4) {
+      paddingLeftIndex = 3;
+    }
+
+    Object.defineProperties(styleWithSpacing, {
+      paddingTop: {
+        value: splitPaddings[0],
+      },
+      paddingRight: {
+        value: splitPaddings[splitPaddings.length - 1 > 0 ? 1 : 0],
+      },
+      paddingBottom: {
+        value: splitPaddings[splitPaddings.length / 3 >= 1 ? 2 : 0],
+      },
+      paddingLeft: {
+        value: splitPaddings[paddingLeftIndex],
+      },
+    });
+  }
+
+  return (
+    <div
+      {...rest}
+      className={classes['grid-wrapper']}
+      ref={ref}
+      style={{
+        paddingTop: styleWithSpacing?.paddingTop,
+        paddingBottom: styleWithSpacing?.paddingBottom,
+      }}
+    >
+      <DataGridActions
+        {...actions}
+        style={{
+          paddingLeft: styleWithSpacing?.paddingLeft,
+          paddingRight: styleWithSpacing?.paddingRight,
+        }}
+        headers={internalHeaders}
+        onColumnToggled={onColumnToggled}
+      />
+      <div className={classes['table-wrapper']}>
+        <table className={classes['table']}>
+          <DataGridHeader
+            headers={internalHeaders}
+            initialSort={initialSort}
+            onSort={onSort}
+            disableContextMenuColumn={disableContextMenuColumn}
+            enableMultiSorting={enableMultiSorting}
+            spacing={styleWithSpacing}
+          />
+          <DataGridBody
+            children={children}
+            data={data}
+            headers={internalHeaders}
+            isLoading={isLoading}
+            disableContextMenuColumn={disableContextMenuColumn}
+            emptyLabel={emptyLabel}
+            spacing={styleWithSpacing}
+          />
+        </table>
+      </div>
+      {paginationProps && !isLoading && (
+        <Pagination
+          {...paginationProps}
+          style={{
+            ...paginationProps.style,
+            paddingLeft: styleWithSpacing?.paddingLeft,
+            paddingRight: styleWithSpacing?.paddingRight,
+          }}
+          className={`${classes['pagination']} ${paginationProps.className ?? ''}`}
+        />
+      )}
+    </div>
+  );
+};
+
+export const DataGrid = React.forwardRef(DataGridInner) as <T extends {}>(
+  p: Props<T> & { ref?: Ref<HTMLDivElement> }
+) => ReactElement;