@addev-be/ui 0.5.5 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@addev-be/ui",
-  "version": "0.5.5",
+  "version": "0.6.0",
   "type": "module",
   "scripts": {
     "watch": "tsc -b --watch",

package/src/components/data/DataGrid/DataGridRowTemplate.tsx

@@ -2,28 +2,29 @@ import * as styles from './styles';
 
 import { DataGridCell } from './DataGridCell';
 import { DataGridRowTemplateProps } from './types';
+import { VirtualScrollerTemplateProps } from '../VirtualScroller/types';
 import { useContext } from 'react';
 
 export const DataGridRowTemplate = <R,>({
-  row,
-  rowIndex,
+  item,
+  index,
   context,
-}: DataGridRowTemplateProps<R>) => {
+}: VirtualScrollerTemplateProps<R, DataGridRowTemplateProps<R>>) => {
   const { visibleColumns, rowKeyGetter, toggleSelection, ...props } =
     useContext(context);
 
-  if (!row) {
+  if (!item) {
     return (
-      <styles.DataGridRow key={`loading-row-${rowIndex}`}>
+      <styles.DataGridRow key={`loading-row-${index}`}>
         {!!props.selectable && (
           <styles.LoadingCell className="animate-pulse">
             <div />
           </styles.LoadingCell>
         )}
-        {visibleColumns.map((_, index) => (
+        {visibleColumns.map((_, colIndex) => (
           <styles.LoadingCell
             className="animate-pulse"
-            key={`loading-${rowIndex}-${index}`}
+            key={`loading-${index}-${colIndex}`}
           >
             <div />
           </styles.LoadingCell>
@@ -31,9 +32,9 @@ export const DataGridRowTemplate = <R,>({
       </styles.DataGridRow>
     );
   }
-  const key = rowKeyGetter(row);
+  const key = rowKeyGetter(item);
   const selected = props.selectedKeys.includes(key);
-  const { className, style } = props.rowClassNameGetter?.(row) ?? {
+  const { className, style } = props.rowClassNameGetter?.(item) ?? {
     className: '',
     style: undefined,
   };
@@ -54,10 +55,10 @@ export const DataGridRowTemplate = <R,>({
       )}
       {visibleColumns.map(([key, col], index) => (
         <DataGridCell
-          key={`loading-${rowIndex}-${index}`}
+          key={`loading-${index}-${index}`}
           {...(index === 0 ? { className, style } : {})}
-          row={row}
-          rowIndex={rowIndex}
+          row={item}
+          rowIndex={index}
           column={col}
           columnIndex={index}
           context={context}

package/src/components/data/DataGrid/hooks/useDataGrid.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import { DEFAULT_ROW_HEIGHT, VIRTUAL_SCROLL_TOLERANCE } from '../styles';
 import {
   DataGridColumns,
   DataGridContext,
@@ -24,7 +23,6 @@ import { useDataGridCopy, useSortedColumns } from '.';
 import { applyFilter } from '../helpers';
 import { merge } from 'lodash';
 import { useDataGridSettings } from './useDataGridSettings';
-import { useElementSize } from '../../../../hooks';
 
 export const useDataGrid = <R,>(
   props: DataGridProps<R>,
@@ -35,8 +33,6 @@ export const useDataGrid = <R,>(
     onFiltersChanged,
     onSortsChanged,
     loadCopyRows,
-    rowHeight = DEFAULT_ROW_HEIGHT,
-    onVisibleRowsChange,
     onSelectionChange,
     selectable,
     initialSorts,
@@ -161,30 +157,7 @@ export const useDataGrid = <R,>(
   }, [sorts, onSortsChanged]);
 
   /** VIRTUAL SCROLLING */
-
-  const scrollableRef = useRef<HTMLTableSectionElement | null>(null);
-  const { height } = useElementSize(scrollableRef.current);
-
-  const [scrollTop, setScrollTop] = useState(0);
-  const [index, length] =
-    // props.showAllRows ? [0, sortedRows.length] :
-    [Math.floor(scrollTop / rowHeight), Math.ceil(height / rowHeight)];
-
-  const onScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
-    const target = e.target as HTMLDivElement;
-    setScrollTop(target.scrollTop);
-  }, []);
-
-  const indexWithTolerance = Math.max(0, index - VIRTUAL_SCROLL_TOLERANCE);
-  const lengthWithTolerance = length + 2 * VIRTUAL_SCROLL_TOLERANCE;
-  const visibleRows = sortedRows.slice(
-    indexWithTolerance,
-    indexWithTolerance + lengthWithTolerance
-  );
-
-  useEffect(() => {
-    onVisibleRowsChange?.(indexWithTolerance, lengthWithTolerance);
-  }, [indexWithTolerance, lengthWithTolerance, onVisibleRowsChange]);
+  const scrollableRef = useRef<HTMLDivElement>(null);
 
   /** FOOTERS */
   const [footers, setFooters] = useState<Record<string, string>>(
@@ -241,10 +214,7 @@ export const useDataGrid = <R,>(
       settings,
       setSettings,
       saveSettings,
-      visibleRows,
       scrollableRef,
-      onScroll,
-      index,
       length,
       rowKeyGetter,
       gridTemplateColumns,
@@ -269,10 +239,7 @@ export const useDataGrid = <R,>(
       settings,
       setSettings,
       saveSettings,
-      visibleRows,
-      onScroll,
-      index,
-      length,
+      scrollableRef,
       rowKeyGetter,
       gridTemplateColumns,
       footers,
@@ -303,10 +270,6 @@ export const useDataGrid = <R,>(
         saveSettings: () => {},
         settings: {},
         setSettings: () => {},
-        visibleRows: [],
-        scrollableRef: { current: null },
-        onScroll: () => {},
-        index: 0,
         length: 0,
         gridTemplateColumns: '',
         footers: {},

package/src/components/data/DataGrid/index.tsx

@@ -1,11 +1,12 @@
 import * as styles from './styles';
 
+import { Context, useRef } from 'react';
 import { DataGridContextProps, DataGridProps } from './types';
 
 import { DataGridFooter } from './DataGridFooter';
 import { DataGridHeader } from './DataGridHeader';
 import { DataGridRowTemplate } from './DataGridRowTemplate';
-import { VirtualScroller } from './VirtualScroller';
+import { VirtualScroller } from '../VirtualScroller';
 import { useDataGrid } from './hooks';
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -17,18 +18,16 @@ export const DataGrid = <R,>({
 }: DataGridProps<R> & {
   contextOverride?: Partial<DataGridContextProps<R>>;
 }) => {
-  const {
-    className,
-    // onRowDoubleClick,
-    onVisibleRowsChange,
-  } = props;
+  const scrollableRef = useRef<HTMLDivElement>(null);
+  const { className } = props;
   const [contextProps, DataGridContext] = useDataGrid(props, contextOverride);
   const {
     columns,
     rowHeight = 32,
     headerRowHeight = 40,
-    scrollableRef,
-    onScroll,
+    gridTemplateColumns,
+    sortedRows,
+    onVisibleRowsChange,
   } = contextProps;
 
   const hasFooter = Object.values(columns).some((col) => col.footer);
@@ -39,7 +38,6 @@ export const DataGrid = <R,>({
     <DataGridContext.Provider value={contextProps}>
       <styles.DataGridContainer
         ref={scrollableRef}
-        onScroll={onScroll}
         $headerRowHeight={headerRowHeight}
         $rowHeight={rowHeight}
         $rowsCount={contextProps.sortedRows.length}
@@ -47,11 +45,13 @@ export const DataGrid = <R,>({
         className={className}
       >
         <DataGridHeader context={DataGridContext} />
-        <VirtualScroller
-          onRangeChange={onVisibleRowsChange}
-          hasFooter={hasFooter}
-          rowTemplate={rowTemplate}
-          context={DataGridContext}
+        <VirtualScroller<R, { context: Context<DataGridContextProps<R>> }>
+          gridTemplateColumns={gridTemplateColumns}
+          items={sortedRows}
+          itemTemplate={rowTemplate}
+          itemProps={{ context: DataGridContext }}
+          rowHeightInPx={styles.DEFAULT_ROW_HEIGHT}
+          onRangeChanged={onVisibleRowsChange}
         />
         {hasFooter && <DataGridFooter context={DataGridContext} />}
       </styles.DataGridContainer>

package/src/components/data/DataGrid/styles.ts

@@ -1,52 +1,13 @@
 import styled, { css } from 'styled-components';
 
 import { ThemeColor } from '../../../providers/ThemeProvider/types';
+import { VirtualScrollerContainer } from '../VirtualScroller/styles';
 
-export const VIRTUAL_SCROLL_TOLERANCE = 20;
 export const TOOLBAR_HEIGHT = 40;
 export const DEFAULT_HEADER_ROW_HEIGHT = 40;
 export const DEFAULT_FOOTER_ROW_HEIGHT = 40;
 export const DEFAULT_ROW_HEIGHT = 32;
 
-export const TopPaddingRow = styled.div``;
-export const BottomPaddingRow = styled.div``;
-
-export const VirtualScrollerContainer = styled.div<{
-  $height: number;
-}>`
-  position: relative;
-  overflow: visible;
-  height: ${({ $height }) => `${$height}px`};
-`;
-export const VirtualScrollerRowsContainer = styled.div.attrs<{
-  $gridTemplateColumns: string;
-  $topPadding: number;
-  $rowHeight?: number;
-}>(({ $gridTemplateColumns, $topPadding, $rowHeight = DEFAULT_ROW_HEIGHT }) => {
-  const rowHeightValue = `${$rowHeight}px`;
-  return {
-    style: {
-      top: `${$topPadding}px`,
-      gridTemplateColumns: $gridTemplateColumns,
-      gridAutoRows: rowHeightValue,
-    },
-  };
-})`
-  display: grid;
-  position: absolute;
-
-  ${TopPaddingRow} {
-    grid-column-start: 1;
-    grid-column-end: -1;
-    grid-row: 1;
-  }
-  ${BottomPaddingRow} {
-    grid-column-start: 1;
-    grid-column-end: -1;
-    grid-row: -1;
-  }
-`;
-
 export const DataGridResizeGrip = styled.div<{ $headerColor?: ThemeColor }>`
   position: absolute;
   top: 0;
@@ -204,6 +165,7 @@ export const DataGridContainer = styled.div<{
   ${DataGridCell} {
     height: ${({ $rowHeight = DEFAULT_ROW_HEIGHT }) => `${$rowHeight}px`};
     line-height: ${({ $rowHeight = DEFAULT_ROW_HEIGHT }) => `${$rowHeight}px`};
+    box-sizing: border-box;
   }
 
   ${VirtualScrollerContainer} {

package/src/components/data/DataGrid/types.ts

@@ -124,10 +124,6 @@ export type DataGridContextProps<R> = DataGridProps<R> & {
   saveSettings: (newSettings?: DataGridSettings) => void;
   settings: DataGridSettings;
   setSettings: Dispatch<SetStateAction<DataGridSettings>>;
-  visibleRows: R[];
-  scrollableRef: React.RefObject<HTMLDivElement>;
-  onScroll: (e: React.UIEvent<HTMLDivElement>) => void;
-  index: number;
   length: number;
   rowKeyGetter: (row: R) => string;
   gridTemplateColumns: string;
@@ -268,8 +264,6 @@ export type DataGridFilterCheckbox = {
 };
 
 export type DataGridRowTemplateProps<R> = {
-  row: R | null;
-  rowIndex: number;
   selected?: boolean;
   toggleSelection?: () => void;
   context: DataGridContext<R>;

package/src/components/data/SqlRequestGrid/helpers/columns.tsx

@@ -0,0 +1,277 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { SqlRequestDataGridColumn, SqlRequestDataGridColumns } from '../types';
+import {
+  buildExcelFormat,
+  numberFilter,
+  textFilter,
+} from '../../DataGrid/helpers';
+import {
+  formatMoney,
+  formatNumber,
+  formatNumberInvariant,
+  formatPercentage,
+} from '../../../../helpers/numbers';
+
+import { formatDate } from '../../../../helpers/dates';
+
+export const sqlTextColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<SqlRequestDataGridColumn<R>>
+): SqlRequestDataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => row[key] ?? '',
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
+    ...options,
+    footer: (rows) => `${rows[0][key]} éléments`,
+  },
+});
+
+/**
+ * Creates a column with a composed value from multiple fields,
+ * and filtered by a text filter on the first field
+ */
+export const sqlComposedColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  fields: string[],
+  options?: Partial<SqlRequestDataGridColumn<R>>
+): SqlRequestDataGridColumns<R> => ({
+  [key]: {
+    field: {
+      fieldAlias: key,
+      operator: 'jsonObject',
+      operands: fields.flatMap((field) => [
+        { constantValue: field },
+        { fieldName: field },
+      ]),
+    },
+    name: title,
+    render: (row) => row[key] ?? '',
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: {
+      ...textFilter(fields[0]),
+      getter: (value) => value[fields[0]] ?? 0,
+    },
+    filterField: fields[0],
+    sortField: fields[0],
+    footer: (rows) => `${rows[0][key]} éléments`,
+    ...options,
+  },
+});
+
+export const sqlMailColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<SqlRequestDataGridColumn<R>>
+): SqlRequestDataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => <a href={`mailto:${row[key]}`}>{row[key] ?? ''}</a>,
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
+    footer: (rows) => `${rows[0][key]} éléments`,
+    ...options,
+  },
+});
+
+export const sqlPhoneColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<SqlRequestDataGridColumn<R>>
+): SqlRequestDataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => <a href={`tel:${row[key]}`}>{row[key] ?? ''}</a>,
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
+    footer: (rows) => `${rows[0][key]} éléments`,
+    ...options,
+  },
+});
+
+export const sqlDateColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<SqlRequestDataGridColumn<R>>
+): SqlRequestDataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    type: 'date',
+    render: (row) => formatDate(row[key]),
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    excelFormatter: () => 'dd/mm/yyyy',
+    excelValue: (value) => formatDate(value, 'YYYY-MM-DD'),
+    filter: {
+      ...textFilter(key),
+      getter: (value) => value[key] ?? '',
+      formatter: (value) => formatDate(value),
+      renderer: (value) => formatDate(value),
+    },
+    footer: (rows) => `${rows[0][key]} éléments`,
+    ...options,
+  },
+});
+
+export const sqlMonthColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<SqlRequestDataGridColumn<R>>
+): SqlRequestDataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => (row[key] ? `${row[key]} mois ` : ''),
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
+    footer: (rows) => `${rows[0][key]} éléments`,
+    ...options,
+  },
+});
+
+export const sqlNumberColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  decimals = 2,
+  options?: Partial<SqlRequestDataGridColumn<R>>
+): SqlRequestDataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => formatNumber(row[key], decimals) ?? '',
+    excelFormatter: () => buildExcelFormat(decimals),
+    excelValue: (value) => formatNumberInvariant(value, decimals),
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: {
+      ...numberFilter(key),
+      getter: (value) => value[key] ?? 0,
+      renderer: (value) => formatNumber(value, decimals) ?? '',
+    },
+    footer: {
+      sum: null,
+      avg: null,
+      count: null,
+      max: null,
+      min: null,
+    },
+    ...options,
+  },
+});
+
+export const sqlMoneyColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  decimals = 2,
+  options?: Partial<SqlRequestDataGridColumn<R>>
+): SqlRequestDataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    type: 'number',
+    render: (row) => formatMoney(row[key], decimals) ?? '',
+    excelFormatter: () => buildExcelFormat(decimals, ' €'),
+    excelValue: (value) => formatNumberInvariant(value, decimals),
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: {
+      ...numberFilter(key),
+      getter: (value) => value[key] ?? 0,
+      renderer: (value) => formatMoney(value, decimals) ?? '',
+    },
+    footer: {
+      sum: null,
+      avg: null,
+      count: null,
+      max: null,
+      min: null,
+    },
+    ...options,
+  },
+});
+
+export const sqlPercentageColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  decimals = 2,
+  options?: Partial<SqlRequestDataGridColumn<R>>
+): SqlRequestDataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => formatPercentage(row[key]) ?? '',
+    excelFormatter: () => buildExcelFormat(decimals, '%'),
+    excelValue: (value) => formatNumberInvariant(value, decimals),
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: {
+      ...numberFilter(key),
+      getter: (value) => value[key] ?? 0,
+      renderer: (value) => formatPercentage(value, decimals) ?? '',
+    },
+    ...options,
+  },
+});
+
+export const sqlCheckboxColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<SqlRequestDataGridColumn<R>>
+): SqlRequestDataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => (
+      <>
+        <input type="checkbox" checked={row[key]} />
+        <span>{row[key] ? ' Oui' : ' Non'}</span>
+      </>
+    ),
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: { ...numberFilter(key), getter: (value) => value[key] ?? 0 },
+    footer: (rows) => `${rows[0][key]} éléments`,
+    ...options,
+  },
+});
+
+export const sqlColorColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<SqlRequestDataGridColumn<R>>
+): SqlRequestDataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => (
+      <div
+        style={{ position: 'absolute', inset: 0, backgroundColor: row[key] }}
+      >
+        &nbsp;
+      </div>
+    ),
+    excelValue: () => '',
+    excelBackgroundColor: (value) => value,
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: {
+      ...textFilter(key),
+      getter: (value) => value[key] ?? '',
+      renderer: (value) => (
+        <div
+          style={{
+            backgroundColor: value,
+            width: 'var(--space-16)',
+            height: '1em',
+          }}
+        >
+          &nbsp;
+        </div>
+      ),
+    },
+    ...options,
+  },
+});

package/src/components/data/SqlRequestGrid/helpers/index.ts

@@ -0,0 +1,2 @@
+export * from './sqlRequests';
+export * from './columns';

package/src/components/data/SqlRequestGrid/helpers/sqlRequests.ts

@@ -0,0 +1,16 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { ConditionDTO } from '../../../../services/sqlRequests';
+import { SqlRequestDataGridFilters } from '../types';
+import _ from 'lodash';
+
+export const convertSqlFiltersToConditions = (
+  filters: SqlRequestDataGridFilters
+): Record<string, ConditionDTO> =>
+  _.mapValues(filters, (filter, columnKey) => ({
+    field: columnKey,
+    operator: filter.operator as any,
+    value: ['inArray', 'inRange'].includes(filter.operator)
+      ? filter.values
+      : _.castArray<string | number | null>(filter.values)[0],
+  }));

package/src/components/data/SqlRequestGrid/index.tsx

@@ -0,0 +1,138 @@
+import * as styles from './styles';
+
+import {
+  ConditionDTO,
+  OrderByDTO,
+  useSqlRequestHandler,
+} from '../../../services/sqlRequests';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { SqlRequestGridProps } from './types';
+import { VirtualScroller } from '../VirtualScroller';
+import { debounce } from 'lodash';
+import { isColumnVisible } from '../DataGrid/helpers';
+
+export const SqlRequestGrid = <R,>({
+  rowHeight = styles.DEFAULT_ROW_HEIGHT,
+  itemsPerRow,
+  itemTemplate,
+  gap,
+  ...props
+}: SqlRequestGridProps<R>) => {
+  const currentRows = useRef<R[]>([]);
+  const [rows, setRows] = useState<R[]>([]);
+  const [start, setStart] = useState(0);
+  const [length, setLength] = useState(50);
+  const [count, setCount] = useState(-1);
+  const [sqlRequest] = useSqlRequestHandler<R>(props.type);
+
+  const [columnsKeys, visibleColumnsKeys] = useMemo(
+    () => [
+      [...Object.keys(props.fields), ...(props.additionalFields ?? [])],
+      [
+        ...Object.keys(props.fields).filter((key) =>
+          isColumnVisible(props.fields[key])
+        ),
+        ...(props.additionalFields ?? []),
+      ],
+    ],
+    [props.fields, props.additionalFields]
+  );
+  const columnTypes = useMemo(
+    () =>
+      visibleColumnsKeys.map((key) =>
+        String(props.fields[key]?.type ?? 'text')
+      ),
+    [visibleColumnsKeys, props.fields]
+  );
+
+  const loadRows = useRef(
+    debounce(
+      (
+        columns: string[],
+        returnColumns: string[],
+        conditions: ConditionDTO[] = [],
+        orderBy: OrderByDTO[] = [],
+        start = 0,
+        length = 100,
+        getCount = false
+      ) => {
+        sqlRequest({
+          columns: columns.includes('Id') ? columns : [...columns, 'Id'],
+          returnColumns: returnColumns.includes('Id')
+            ? returnColumns
+            : [...returnColumns, 'Id'],
+          columnTypes: columnTypes.includes('Id')
+            ? columnTypes
+            : [...columnTypes, 'Id'],
+          conditions,
+          orderBy,
+          start,
+          length,
+          getCount,
+        }).then((response) => {
+          if (getCount) {
+            currentRows.current = Array(response.count).fill(null);
+            if (getCount) setCount(response.count ?? 0);
+          }
+          const parsedRows = props.parser
+            ? response.data.map(props.parser)
+            : (response.data as R[]);
+          currentRows.current.splice(start, length, ...parsedRows);
+          setRows([...currentRows.current]);
+        });
+      },
+      100,
+      {
+        leading: true,
+        trailing: true,
+      }
+    )
+  );
+
+  useEffect(
+    () =>
+      loadRows.current(
+        columnsKeys,
+        visibleColumnsKeys,
+        [],
+        [],
+        start,
+        length,
+        count < 0
+      ),
+    [
+      props.fields,
+      start,
+      length,
+      count,
+      props.conditions,
+      columnsKeys,
+      visibleColumnsKeys,
+    ]
+  );
+
+  const onVisibleRowsChanged = useCallback(
+    (newStart: number, newLength: number) => {
+      if (newStart !== start || newLength !== length) {
+        setStart(newStart);
+        setLength(newLength);
+      }
+    },
+    [length, start]
+  );
+
+  return (
+    <styles.SqlRequestGridContainer>
+      <VirtualScroller
+        gridTemplateColumns={`repeat(${itemsPerRow}, 1fr)`}
+        items={rows}
+        itemTemplate={itemTemplate}
+        itemsPerRow={itemsPerRow}
+        rowHeightInPx={rowHeight}
+        onRangeChanged={onVisibleRowsChanged}
+        gap={gap}
+      />
+    </styles.SqlRequestGridContainer>
+  );
+};

package/src/components/data/SqlRequestGrid/styles.ts

@@ -0,0 +1,50 @@
+import styled from 'styled-components';
+
+export const DEFAULT_ROW_HEIGHT = 200;
+
+export const SqlRequestGridContainer = styled.div.attrs({
+  className: 'SqlRequestGridContainer',
+})`
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+`;
+
+export const TopPaddingRow = styled.div``;
+export const BottomPaddingRow = styled.div``;
+
+export const VirtualScrollerContainer = styled.div<{
+  $height: number;
+}>`
+  position: relative;
+  overflow: visible;
+  height: ${({ $height }) => `${$height}px`};
+`;
+export const VirtualScrollerRowsContainer = styled.div.attrs<{
+  $gridTemplateColumns: string;
+  $topPadding: number;
+  $rowHeight?: number;
+}>(({ $gridTemplateColumns, $topPadding, $rowHeight = DEFAULT_ROW_HEIGHT }) => {
+  const rowHeightValue = `${$rowHeight}px`;
+  return {
+    style: {
+      top: `${$topPadding}px`,
+      gridTemplateColumns: $gridTemplateColumns,
+      gridAutoRows: rowHeightValue,
+    },
+  };
+})`
+  display: grid;
+  position: absolute;
+
+  ${TopPaddingRow} {
+    grid-column-start: 1;
+    grid-column-end: -1;
+    grid-row: 1;
+  }
+  ${BottomPaddingRow} {
+    grid-column-start: 1;
+    grid-column-end: -1;
+    grid-row: -1;
+  }
+`;

package/src/components/data/SqlRequestGrid/types.ts

@@ -0,0 +1,43 @@
+import {
+  ConditionDTO,
+  FieldDTO,
+  OrderByDTO,
+  SqlRequestRow,
+} from '../../../services/sqlRequests';
+import {
+  DataGridColumn,
+  DataGridFilter,
+  DataGridFilterType,
+} from '../DataGrid/types';
+
+import { VirtualScrollerTemplateFC } from '../VirtualScroller/types';
+
+export type SqlRequestGridFilter<
+  T extends DataGridFilterType = DataGridFilterType
+> = DataGridFilter<T> & {
+  field?: FieldDTO;
+};
+
+export type SqlRequestGridFilters = Record<string, SqlRequestGridFilter>;
+
+export type SqlRequestGridColumn<R> = DataGridColumn<R> & {
+  filter?: SqlRequestGridFilter;
+  field?: FieldDTO;
+  filterField?: string;
+  sortField?: string;
+};
+
+export type SqlRequestGridColumns<R> = Record<string, SqlRequestGridColumn<R>>;
+
+export type SqlRequestGridProps<R> = {
+  itemTemplate: VirtualScrollerTemplateFC<R>;
+  itemsPerRow?: number;
+  rowHeight?: number;
+  gap?: string;
+  fields: SqlRequestGridColumns<R>;
+  additionalFields?: string[];
+  type: string;
+  orderBy?: OrderByDTO[];
+  conditions?: ConditionDTO[];
+  parser?: (row: SqlRequestRow<R>) => R;
+};

package/src/components/data/VirtualScroller/hooks.ts

@@ -0,0 +1,71 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { useElementSize } from '../../../hooks';
+
+export const VIRTUAL_SCROLL_TOLERANCE = 20;
+
+type VirtualScrollingProps<R> = {
+  scrollableElement: HTMLElement | null;
+  rowHeightInPx: number;
+  items: R[];
+  itemsPerRow?: number;
+  tolerance?: number;
+};
+
+export const useVirtualScrolling = <R>({
+  scrollableElement,
+  rowHeightInPx,
+  items,
+  itemsPerRow = 1,
+  tolerance = VIRTUAL_SCROLL_TOLERANCE,
+}: VirtualScrollingProps<R>) => {
+  const { height } = useElementSize(scrollableElement);
+
+  const [scrollTop, setScrollTop] = useState(0);
+  const [rowIndex, rowLength] = [
+    Math.floor(scrollTop / rowHeightInPx),
+    Math.ceil(height / rowHeightInPx),
+  ];
+  const [index, length] = [rowIndex * itemsPerRow, rowLength * itemsPerRow];
+  const rowTolerance = Math.ceil(tolerance / itemsPerRow);
+
+  const totalRows = Math.ceil((items?.length ?? 0) / itemsPerRow);
+  const totalHeight = totalRows * rowHeightInPx;
+  const topPadding = Math.max(0, rowIndex - rowTolerance) * rowHeightInPx;
+
+  const onScroll = useCallback(() => {
+    if (scrollableElement) {
+      setScrollTop(scrollableElement.scrollTop);
+    }
+  }, [scrollableElement]);
+
+  useEffect(() => {
+    const scrollable = scrollableElement;
+    if (scrollable) {
+      scrollable.addEventListener('scroll', onScroll);
+      return () => {
+        scrollable.removeEventListener('scroll', onScroll);
+      };
+    }
+  }, [onScroll, scrollableElement]);
+
+  const rowIndexWithTolerance = Math.max(0, rowIndex - rowTolerance);
+  const rowLengthWithTolerance = rowLength + 2 * rowTolerance;
+  const indexWithTolerance = rowIndexWithTolerance * itemsPerRow;
+  const lengthWithTolerance = rowLengthWithTolerance * itemsPerRow;
+
+  const visibleItems = items.slice(
+    indexWithTolerance,
+    indexWithTolerance + lengthWithTolerance
+  );
+
+  return {
+    index,
+    length,
+    indexWithTolerance,
+    lengthWithTolerance,
+    visibleItems,
+    totalHeight,
+    topPadding,
+  };
+};

package/src/components/data/VirtualScroller/index.tsx

@@ -0,0 +1,75 @@
+/* eslint-disable @typescript-eslint/no-empty-object-type */
+
+import * as styles from './styles';
+
+import { useEffect, useState } from 'react';
+
+import { VirtualScrollerTemplateFC } from './types';
+import { useVirtualScrolling } from './hooks';
+
+type VirtualScrollerProps<R> = {
+  gridTemplateColumns: string;
+  items: R[];
+  itemTemplate: VirtualScrollerTemplateFC<R>;
+  rowHeightInPx?: number;
+  gap?: string;
+  itemsPerRow?: number;
+  tolerance?: number;
+  itemProps?: object;
+  onRangeChanged?: (index: number, length: number) => void;
+};
+
+export const VirtualScroller = <R,>({
+  gridTemplateColumns,
+  items,
+  rowHeightInPx = styles.DEFAULT_ROW_HEIGHT,
+  itemTemplate: ItemTemplate,
+  itemProps = {},
+  onRangeChanged,
+  gap,
+  itemsPerRow,
+  tolerance,
+}: VirtualScrollerProps<R>) => {
+  const [scrollableElement, setScrollableElement] =
+    useState<HTMLElement | null>(null);
+  const {
+    indexWithTolerance,
+    lengthWithTolerance,
+    visibleItems,
+    topPadding,
+    totalHeight,
+  } = useVirtualScrolling<R>({
+    scrollableElement,
+    rowHeightInPx,
+    items,
+    itemsPerRow,
+    tolerance,
+  });
+
+  useEffect(() => {
+    onRangeChanged?.(indexWithTolerance, lengthWithTolerance);
+  }, [indexWithTolerance, lengthWithTolerance, onRangeChanged]);
+
+  return (
+    <styles.VirtualScrollerContainer
+      $height={totalHeight}
+      ref={(element) => setScrollableElement(element?.parentElement ?? null)}
+    >
+      <styles.VirtualScrollerItemsContainer
+        $gridTemplateColumns={gridTemplateColumns}
+        $topPadding={topPadding}
+        $itemHeight={rowHeightInPx}
+        $gap={gap}
+      >
+        {visibleItems.map((item, currentIndex) => (
+          <ItemTemplate
+            key={indexWithTolerance + currentIndex}
+            item={item}
+            index={currentIndex}
+            {...itemProps}
+          />
+        ))}
+      </styles.VirtualScrollerItemsContainer>
+    </styles.VirtualScrollerContainer>
+  );
+};

package/src/components/data/VirtualScroller/styles.ts

@@ -0,0 +1,51 @@
+import styled from 'styled-components';
+
+export const DEFAULT_ROW_HEIGHT = 32;
+
+export const TopPaddingItem = styled.div``;
+export const BottomPaddingItem = styled.div``;
+
+export const VirtualScrollerContainer = styled.div.attrs<{
+  $height: number;
+}>(({ $height }) => ({
+  className: 'VirtualScrollerFiller',
+  style: {
+    height: `${$height}px`,
+  },
+}))`
+  position: relative;
+  overflow: visible;
+`;
+
+export const VirtualScrollerItemsContainer = styled.div.attrs<{
+  $gridTemplateColumns: string;
+  $gap?: string;
+  $topPadding: number;
+  $itemHeight: number;
+}>(({ $gridTemplateColumns, $topPadding, $itemHeight }) => {
+  const itemHeightValue = `${$itemHeight}px`;
+  return {
+    className: 'VirtualScrollerItemsContainer',
+    style: {
+      top: `${$topPadding}px`,
+      gridTemplateColumns: $gridTemplateColumns,
+      gridAutoItems: itemHeightValue,
+    },
+  };
+})`
+  display: grid;
+  position: absolute;
+  min-width: 100%;
+  grid-gap: ${({ $gap }) => $gap};
+
+  ${TopPaddingItem} {
+    grid-column-start: 1;
+    grid-column-end: -1;
+    grid-row: 1;
+  }
+  ${BottomPaddingItem} {
+    grid-column-start: 1;
+    grid-column-end: -1;
+    grid-row: -1;
+  }
+`;

package/src/components/data/VirtualScroller/types.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+
+export type VirtualScrollerTemplateProps<R> = {
+  item: R | null;
+  index: number;
+};
+
+export type VirtualScrollerTemplateFC<R> = FC<VirtualScrollerTemplateProps<R>>;

package/src/components/data/index.ts

@@ -5,4 +5,6 @@ export * from './AdvancedRequestDataGrid';
 export * from './SqlRequestDataGrid';
 export * from './SqlRequestDataGrid/helpers';
 export * from './SqlRequestDataGrid/types';
+export * from './SqlRequestGrid';
+export * from './SqlRequestGrid/types';
 export * from './AdvancedRequestDataGrid/helpers';

package/src/components/ui/Card/index.tsx

@@ -6,8 +6,8 @@ type CardFC = FC<HTMLAttributes<HTMLDivElement>> & {
   Footer: typeof CardFooter;
 };
 
-export const Card: CardFC = ({ children }) => {
-  return <CardContainer>{children}</CardContainer>;
+export const Card: CardFC = ({ children, ...props }) => {
+  return <CardContainer {...props}>{children}</CardContainer>;
 };
 
 Card.Header = CardHeader;

package/src/components/data/DataGrid/VirtualScroller.tsx

@@ -1,47 +0,0 @@
-import * as styles from './styles';
-
-import { DataGridContext, DataGridRowTemplateProps } from './types';
-import { FC, useContext } from 'react';
-
-type VirtualScrollerProps<R> = {
-  showAllRows?: boolean;
-  rowTemplate: FC<DataGridRowTemplateProps<R>>;
-  hasFooter?: boolean;
-  context: DataGridContext<R>;
-  onRangeChange?: (startIndex: number, length: number) => void;
-};
-
-export const VirtualScroller = <R,>(props: VirtualScrollerProps<R>) => {
-  const {
-    rowHeight = styles.DEFAULT_ROW_HEIGHT,
-    // headerRowHeight = styles.DEFAULT_HEADER_ROW_HEIGHT,
-    sortedRows,
-    index,
-    visibleRows,
-    gridTemplateColumns,
-  } = useContext(props.context);
-  const {
-    rowTemplate: RowTemplate,
-    // hasFooter, onRangeChange
-  } = props;
-
-  const totalHeight = sortedRows.length * rowHeight;
-  const topPadding =
-    Math.max(0, index - styles.VIRTUAL_SCROLL_TOLERANCE) * rowHeight;
-  // const headerAndFooterHeight =
-  //   2 * headerRowHeight + (hasFooter ? rowHeight : 0) + 2;
-
-  return (
-    <styles.VirtualScrollerContainer $height={totalHeight}>
-      <styles.VirtualScrollerRowsContainer
-        $gridTemplateColumns={gridTemplateColumns}
-        $topPadding={topPadding}
-        $rowHeight={rowHeight}
-      >
-        {visibleRows.map((row, index) => (
-          <RowTemplate row={row} rowIndex={index} context={props.context} />
-        ))}
-      </styles.VirtualScrollerRowsContainer>
-    </styles.VirtualScrollerContainer>
-  );
-};