@addev-be/ui 0.2.6 → 0.2.8

package/dist/components/ui/ContextMenu/styles.js

@@ -0,0 +1,56 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Divider = exports.MenuItemContainer = exports.SubMenu = exports.MenuContainer = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var menuContainerCss = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  color: var(--color-neutral-900);\n  border-radius: var(--rounded-md);\n  padding: var(--space-1) 0;\n  box-shadow: var(--shadow-lg);\n  background-color: var(--color-neutral-100);\n  min-width: 20em;\n  outline: 1px solid var(--color-neutral-200);\n  display: flex;\n  flex-direction: column;\n"], ["\n  position: absolute;\n  color: var(--color-neutral-900);\n  border-radius: var(--rounded-md);\n  padding: var(--space-1) 0;\n  box-shadow: var(--shadow-lg);\n  background-color: var(--color-neutral-100);\n  min-width: 20em;\n  outline: 1px solid var(--color-neutral-200);\n  display: flex;\n  flex-direction: column;\n"])));
+exports.MenuContainer = styled_components_1.default.div.attrs({
+    className: 'MenuContainer',
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  inset: 0;\n"], ["\n  ", "\n  inset: 0;\n"])), menuContainerCss);
+exports.MenuContainer.displayName = 'MenuContainer';
+exports.SubMenu = styled_components_1.default.div.attrs({
+    className: 'SubMenu',
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  top: 0;\n  left: 100%;\n  margin-top: -var(--space-1);\n"], ["\n  ", "\n  top: 0;\n  left: 100%;\n  margin-top: -var(--space-1);\n"])), menuContainerCss);
+exports.SubMenu.displayName = 'SubMenu';
+exports.MenuItemContainer = styled_components_1.default.div.attrs({
+    className: 'MenuItemContainer',
+})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  font-family: var(--font-sans);\n  font-weight: normal;\n  text-align: left;\n  padding: var(--space-1) var(--space-2);\n  font-size: var(--text-base);\n  line-height: var(--leading-6);\n  border: none;\n  cursor: pointer;\n\n  ", "\n\n  ", "\n\n  svg {\n    fill: currentColor;\n    width: var(--space-4);\n    height: var(--space-4);\n    margin-right: var(--space-2);\n  }\n\n  & > ", " {\n    display: none;\n    margin-top: calc(0px - var(--space-1));\n  }\n  &.opened > ", " {\n    display: block;\n  }\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  font-family: var(--font-sans);\n  font-weight: normal;\n  text-align: left;\n  padding: var(--space-1) var(--space-2);\n  font-size: var(--text-base);\n  line-height: var(--leading-6);\n  border: none;\n  cursor: pointer;\n\n  ", "\n\n  ", "\n\n  svg {\n    fill: currentColor;\n    width: var(--space-4);\n    height: var(--space-4);\n    margin-right: var(--space-2);\n  }\n\n  & > ", " {\n    display: none;\n    margin-top: calc(0px - var(--space-1));\n  }\n  &.opened > ", " {\n    display: block;\n  }\n"])), function (_a) {
+    var $withArrow = _a.$withArrow;
+    return $withArrow && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      &::after {\n        content: '';\n        position: absolute;\n        right: var(--space-2);\n        top: 50%;\n        transform: translateY(-50%);\n        border: 4px solid transparent;\n        border-left-color: var(--color-neutral-600);\n      }\n    "], ["\n      &::after {\n        content: '';\n        position: absolute;\n        right: var(--space-2);\n        top: 50%;\n        transform: translateY(-50%);\n        border: 4px solid transparent;\n        border-left-color: var(--color-neutral-600);\n      }\n    "])));
+}, function (_a) {
+    var $color = _a.$color, disabled = _a.disabled;
+    return disabled
+        ? (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          color: var(--color-neutral-300);\n          background-color: var(--color-neutral-100);\n          cursor: default;\n        "], ["\n          color: var(--color-neutral-300);\n          background-color: var(--color-neutral-100);\n          cursor: default;\n        "]))) : $color
+        ? (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n          color: var(--color-", "-600);\n          background-color: var(--color-neutral-100);\n          &:hover {\n            background-color: var(--color-", "-200);\n          }\n        "], ["\n          color: var(--color-", "-600);\n          background-color: var(--color-neutral-100);\n          &:hover {\n            background-color: var(--color-", "-200);\n          }\n        "])), $color, $color) : (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n          color: var(--color-neutral-900);\n          background-color: var(--color-neutral-100);\n          &:hover {\n            background-color: var(--color-neutral-200);\n          }\n        "], ["\n          color: var(--color-neutral-900);\n          background-color: var(--color-neutral-100);\n          &:hover {\n            background-color: var(--color-neutral-200);\n          }\n        "])));
+}, exports.SubMenu, exports.SubMenu);
+exports.MenuItemContainer.displayName = 'MenuItemContainer';
+exports.Divider = styled_components_1.default.div.attrs({
+    className: 'Divider',
+})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  border-top: 1px solid var(--color-neutral-200);\n  margin: var(--space-1) 0;\n"], ["\n  border-top: 1px solid var(--color-neutral-200);\n  margin: var(--space-1) 0;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

package/dist/services/advancedRequests.d.ts

@@ -31,7 +31,7 @@ export type AdvancedRequestRow<R> = {
 };
 export type AdvancedResponseDTO<T = any> = {
     data: AdvancedRequestRow<T>[];
-    total?: number;
+    count?: number;
 };
 export type AdvancedRequestFieldDTO = string | {
     name: string;

package/dist/services/sqlRequests.d.ts

@@ -14,27 +14,32 @@ export type ConditionDTO = {
 };
 export type OrderByDTO = {
     field: string;
+    type: string;
     direction?: 'ASC' | 'DESC';
 };
+export type SqlRequestFooterFunction = 'sum' | 'avg' | 'count' | 'max' | 'min';
 export type SqlRequestDTO = {
     columns?: string[];
     returnColumns?: string[];
+    columnTypes?: string[];
+    totalColumns?: Record<string, SqlRequestFooterFunction>;
     conditions?: ConditionDTO[];
     orderBy?: OrderByDTO[];
     start?: number;
     length?: number;
-    getTotal?: boolean;
+    getCount?: boolean;
     unique?: boolean;
 };
 export type SqlRequestRow<R> = {
-    [K in keyof R]: R[K] extends string | number | null ? R[K] : string | number | null;
+    [K in keyof R]: R[K] extends string | number | null | undefined ? R[K] : string | number | null | undefined;
 };
 export type SqlResponseDTO<T = any> = {
     data: SqlRequestRow<T>[];
-    total?: number;
+    count?: number;
+    totals?: Record<string, string | number | null | undefined>;
 };
 type SqlRequestHandler<T> = (request: SqlRequestDTO) => Promise<SqlResponseDTO<T>>;
 export declare const useSqlRequestHandler: <T = any>(name: string) => [SqlRequestHandler<T>, SqlRequestHandler<{
     Id: string;
-}>];
+}>, SqlRequestHandler<Partial<T>>];
 export {};

package/dist/services/sqlRequests.js

@@ -6,5 +6,6 @@ var hooks_1 = require("./hooks");
 var useSqlRequestHandler = function (name) { return [
     (0, hooks_1.useWebSocketRequestHandler)(name),
     (0, hooks_1.useWebSocketRequestHandler)(name),
+    (0, hooks_1.useWebSocketRequestHandler)(name),
 ]; };
 exports.useSqlRequestHandler = useSqlRequestHandler;

package/package.json

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

package/src/Icons.tsx

@@ -1,12 +1,18 @@
 import { FC, SVGProps, useEffect, useState } from 'react';
 
+import ArrowDown19Icon from '../assets/icons/arrow-down-1-9.svg?react';
 import ArrowDownAZIcon from '../assets/icons/arrow-down-a-z.svg?react';
+import ArrowDownBigSmallIcon from '../assets/icons/arrow-down-big-small.svg?react';
+import ArrowUp91Icon from '../assets/icons/arrow-up-9-1.svg?react';
+import ArrowUpBigSmallIcon from '../assets/icons/arrow-up-big-small.svg?react';
 import ArrowUpZAIcon from '../assets/icons/arrow-up-z-a.svg?react';
 import ArrowsRotateIcon from '../assets/icons/arrows-rotate.svg?react';
 import ArrowsUpDownIcon from '../assets/icons/arrows-up-down.svg?react';
 import CheckIcon from '../assets/icons/check.svg?react';
+import ChevronDownIcon from '../assets/icons/chevron-down.svg?react';
 import CopyIcon from '../assets/icons/copy.svg?react';
 import DownIcon from '../assets/icons/down.svg?react';
+import EllipsisIcon from '../assets/icons/ellipsis.svg?react';
 import FilterFullIcon from '../assets/icons/filter-full.svg?react';
 import FilterIcon from '../assets/icons/filter.svg?react';
 import FilterSlashIcon from '../assets/icons/filter-slash.svg?react';
@@ -17,10 +23,16 @@ import MagnifierIcon from '../assets/icons/magnifier.svg?react';
 import PhoneIcon from '../assets/icons/phone.svg?react';
 import PlusIcon from '../assets/icons/plus.svg?react';
 import RightIcon from '../assets/icons/right.svg?react';
+import SigmaIcon from '../assets/icons/sigma.svg?react';
 import SpinnerIcon from '../assets/icons/spinner-third.svg?react';
 import TableColumnsIcon from '../assets/icons/table-columns.svg?react';
+import TableFooterIcon from '../assets/icons/table-footer.svg?react';
+import TableFooterSlashIcon from '../assets/icons/table-footer-slash.svg?react';
+import TableIcon from '../assets/icons/table.svg?react';
+import TallyIcon from '../assets/icons/tally.svg?react';
 import UpIcon from '../assets/icons/up.svg?react';
 import UserTieIcon from '../assets/icons/user-tie.svg?react';
+import XBarIcon from '../assets/icons/x-bar.svg?react';
 
 type IconFCProps = SVGProps<SVGSVGElement>;
 export type IconFC = FC<IconFCProps>;
@@ -57,12 +69,18 @@ export const LoadingIcon: FC<IconFCProps> = ({ className, ...props }) => (
 
 export {
   ArrowDownAZIcon,
+  ArrowDown19Icon,
+  ArrowDownBigSmallIcon,
   ArrowUpZAIcon,
+  ArrowUpBigSmallIcon,
+  ArrowUp91Icon,
   ArrowsRotateIcon,
   ArrowsUpDownIcon,
   CheckIcon,
+  ChevronDownIcon,
   CopyIcon,
   DownIcon,
+  EllipsisIcon,
   FilterFullIcon,
   FilterIcon,
   FilterSlashIcon,
@@ -73,8 +91,14 @@ export {
   PhoneIcon,
   PlusIcon,
   RightIcon,
+  SigmaIcon,
   SpinnerIcon,
   TableColumnsIcon,
+  TableFooterIcon,
+  TableFooterSlashIcon,
+  TableIcon,
+  TallyIcon,
   UpIcon,
   UserTieIcon,
+  XBarIcon,
 };

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

@@ -95,8 +95,8 @@ export const AdvancedRequestDataGrid = <R,>({
           })
         ).then((response) => {
           if (getTotal) {
-            currentRows.current = Array(response.total).fill(null);
-            if (getTotal) setTotal(response.total ?? 0);
+            currentRows.current = Array(response.count).fill(null);
+            if (getTotal) setTotal(response.count ?? 0);
           }
           const parsedRows = parseJsonObjectFields(
             response.data,
@@ -121,9 +121,7 @@ export const AdvancedRequestDataGrid = <R,>({
         ],
         conditions: [
           ...(props.conditions ?? []),
-          ...Object.values(
-            _.pickBy(conditions, (condition, key) => key !== columnKey)
-          ),
+          ...Object.values(_.pickBy(conditions, (_, key) => key !== columnKey)),
         ].filter((condition) => condition.field !== columnKey),
         orderBy: [
           {

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

@@ -12,8 +12,9 @@ export const useDataGridColumnsModal = <R,>(context: DataGridContext<R>) => {
   const [currentColumns, setCurrentColumns] = useState(columns);
 
   const openModal = useCallback(() => {
+    setCurrentColumns(columns);
     setIsVisible(true);
-  }, []);
+  }, [columns]);
   const closeModal = useCallback(() => {
     setIsVisible(false);
   }, []);

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

@@ -3,8 +3,29 @@
 
 import * as styles from './styles';
 
-import { DataGridContext, DataGridFilterValue } from '../types';
-import { FilterIcon, FilterSlashIcon, MagnifierIcon } from '../../../../Icons';
+import {
+  ArrowDown19Icon,
+  ArrowDownAZIcon,
+  ArrowDownBigSmallIcon,
+  ArrowUp91Icon,
+  ArrowUpBigSmallIcon,
+  ArrowUpZAIcon,
+  FilterIcon,
+  FilterSlashIcon,
+  IconFC,
+  MagnifierIcon,
+  SigmaIcon,
+  TableFooterIcon,
+  TableFooterSlashIcon,
+  TallyIcon,
+  XBarIcon,
+} from '../../../../Icons';
+import {
+  DataGridContext,
+  DataGridFilterType,
+  DataGridFilterValue,
+  DataGridFooterPredefinedFunction,
+} from '../types';
 import {
   applyFilters,
   defaultRendererAndFormatter,
@@ -20,6 +41,7 @@ import {
   useState,
 } from 'react';
 
+import { ContextMenu } from '../../../ui/ContextMenu';
 import { FilterValuesScroller } from '../FilterValuesScroller';
 import { Input } from '../../../forms';
 import { useFilterModal } from './hooks';
@@ -31,6 +53,34 @@ type FilterValuesProps<R> = {
   onClose?: () => void;
 };
 
+const sortAsc: Record<DataGridFilterType, [string, IconFC]> = {
+  number: ['Trier du plus petit au plus grand', ArrowDown19Icon],
+  text: ['Trier de A à Z', ArrowDownAZIcon],
+  // date: 'Trier du plus ancien au plus récent',
+};
+const sortDesc: Record<DataGridFilterType, [string, IconFC]> = {
+  number: ['Trier du plus grand au plus petit', ArrowUp91Icon],
+  text: ['Trier de Z à A', ArrowUpZAIcon],
+  // date: 'Trier du plus récent au plus ancien',
+};
+
+const footerFunctionsTexts: Record<DataGridFooterPredefinedFunction, string> = {
+  average: 'Moyenne',
+  avg: 'Moyenne',
+  count: 'Nombre',
+  max: 'Maximum',
+  min: 'Minimum',
+  sum: 'Somme',
+};
+const footerFunctionsIcons: Record<DataGridFooterPredefinedFunction, IconFC> = {
+  average: XBarIcon,
+  avg: XBarIcon,
+  count: TallyIcon,
+  max: ArrowUpBigSmallIcon,
+  min: ArrowDownBigSmallIcon,
+  sum: SigmaIcon,
+};
+
 export const DataGridFilterMenu = <R,>({
   columnKey,
   context,
@@ -39,10 +89,13 @@ export const DataGridFilterMenu = <R,>({
   const { openModal, modal } = useFilterModal({ columnKey, context });
   const {
     filters = {},
+    footers = {},
     rows,
     columns,
     setFilters,
     filterValuesLoader,
+    setSorts,
+    setFooters,
   } = useContext(context);
   const column = columns[columnKey] ?? {};
   const textFilterInputRef = useRef<HTMLInputElement>(null);
@@ -63,7 +116,13 @@ export const DataGridFilterMenu = <R,>({
         .map(([, filter]) => filter);
       const availableRows = applyFilters(rows, otherFilters);
       const values = availableRows.map((row) => column.filter!.getter(row));
-      setAvailableValues(() => uniq(values).sort());
+      setAvailableValues(() =>
+        uniq(values).sort(
+          column.filter?.type === 'number'
+            ? (a, b) => (a as number) - (b as number)
+            : (a, b) => (a as string).localeCompare(b as string)
+        )
+      );
     }
   }, [column.filter, columnKey, filterValuesLoader, filters, rows]);
 
@@ -138,19 +197,10 @@ export const DataGridFilterMenu = <R,>({
   }, []);
 
   const checkboxesComponent = useMemo(() => {
-    if (column.type === 'date') {
-      const groups = getDateGroups(filteredAvailableValues);
-      return (
-        <FilterValuesScroller
-          values={filteredAvailableValues}
-          selectedValues={selectedValues}
-          onToggle={toggleValues}
-          formatter={formatter}
-          renderer={renderer}
-          groups={groups}
-        />
-      );
-    }
+    const groups =
+      column.type === 'date'
+        ? getDateGroups(filteredAvailableValues)
+        : undefined;
     return (
       <FilterValuesScroller
         values={filteredAvailableValues}
@@ -158,6 +208,7 @@ export const DataGridFilterMenu = <R,>({
         onToggle={toggleValues}
         formatter={formatter}
         renderer={renderer}
+        groups={groups}
       />
     );
   }, [
@@ -169,17 +220,124 @@ export const DataGridFilterMenu = <R,>({
     toggleValues,
   ]);
 
+  const onSortAscClicked = useCallback(() => {
+    setSorts({ [columnKey]: 'asc' });
+    onClose?.();
+  }, [columnKey, onClose, setSorts]);
+  const onSortDescClicked = useCallback(() => {
+    setSorts({ [columnKey]: 'desc' });
+    onClose?.();
+  }, [columnKey, onClose, setSorts]);
+
+  const hasFilters = filters[columnKey]?.values.length > 0;
+  const [[sortAscText, SortAscIcon], [sortDescText, SortDescIcon]] = [
+    sortAsc[column.filter?.type ?? 'text'],
+    sortDesc[column.filter?.type ?? 'text'],
+  ];
+
+  const isFooterVisible =
+    columnKey in footers && footers[columnKey] !== undefined;
+  const showFooter = useCallback(
+    (key: string) => {
+      setFooters((prevFooters) => ({
+        ...prevFooters,
+        [columnKey]: key,
+      }));
+      onClose?.();
+    },
+    [columnKey, onClose, setFooters]
+  );
+  const hideFooter = useCallback(() => {
+    setFooters((prevFooters) => {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const { [columnKey]: _, ...newFooters } = prevFooters;
+      return newFooters;
+    });
+    onClose?.();
+  }, [columnKey, onClose, setFooters]);
+
   return (
-    <styles.Menu onClick={(e) => e.stopPropagation()}>
+    <ContextMenu>
       {modal}
-      <styles.MenuItem onClick={openModal}>
+      {column.sortGetter && (
+        <>
+          <ContextMenu.Item onClick={onSortAscClicked}>
+            <SortAscIcon />
+            {sortAscText}
+          </ContextMenu.Item>
+          <ContextMenu.Item onClick={onSortDescClicked}>
+            <SortDescIcon />
+            {sortDescText}
+          </ContextMenu.Item>
+          <ContextMenu.Divider />
+        </>
+      )}
+      {isFooterVisible && typeof column.footer === 'function' && (
+        <>
+          <ContextMenu.Item onClick={hideFooter}>
+            <TableFooterSlashIcon />
+            Masquer le total
+          </ContextMenu.Item>
+          <ContextMenu.Divider />
+        </>
+      )}
+      {!isFooterVisible && typeof column.footer === 'function' && (
+        <>
+          <ContextMenu.Item onClick={() => showFooter('count')}>
+            <TableFooterIcon />
+            Afficher le total
+          </ContextMenu.Item>
+          <ContextMenu.Divider />
+        </>
+      )}
+      {typeof column.footer === 'object' && (
+        <>
+          <ContextMenu.ParentItem>
+            <TableFooterIcon />
+            Afficher le total
+            <ContextMenu.SubMenu>
+              {Object.keys(column.footer).map((key) => {
+                const TotalIcon =
+                  footerFunctionsIcons[
+                    key as DataGridFooterPredefinedFunction
+                  ] ?? TableFooterIcon;
+                return (
+                  <ContextMenu.Item key={key} onClick={() => showFooter(key)}>
+                    <TotalIcon />
+                    {key in footerFunctionsTexts
+                      ? footerFunctionsTexts[
+                          key as DataGridFooterPredefinedFunction
+                        ]
+                      : key}
+                  </ContextMenu.Item>
+                );
+              })}
+              <ContextMenu.Divider />
+              <ContextMenu.Item
+                onClick={hideFooter}
+                disabled={!isFooterVisible}
+              >
+                <TableFooterSlashIcon />
+                Masquer le total
+              </ContextMenu.Item>
+            </ContextMenu.SubMenu>
+          </ContextMenu.ParentItem>
+          <ContextMenu.Divider />
+        </>
+      )}
+      <ContextMenu.Item onClick={openModal}>
         <FilterIcon />
         Filtrer ...
-      </styles.MenuItem>
-      <styles.MenuItem $color="danger" onClick={clearFilter}>
+      </ContextMenu.Item>
+      <ContextMenu.Item
+        $color="danger"
+        onClick={clearFilter}
+        disabled={!hasFilters}
+      >
         <FilterSlashIcon />
         Supprimer le filtre
-      </styles.MenuItem>
+      </ContextMenu.Item>
+      <ContextMenu.Divider />
       <styles.InputContainer>
         <MagnifierIcon />
         <Input
@@ -195,6 +353,6 @@ export const DataGridFilterMenu = <R,>({
       <styles.CheckboxesContainer>
         {checkboxesComponent}
       </styles.CheckboxesContainer>
-    </styles.Menu>
+    </ContextMenu>
   );
 };

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

@@ -1,70 +1,11 @@
-import styled, { css } from 'styled-components';
-
-import { ThemeColor } from '../../../../providers/ThemeProvider/types';
-
-export const Menu = styled.div.attrs({
-  className: 'Menu',
-})`
-  position: absolute;
-  inset: 0;
-  color: var(--color-neutral-900);
-  border-radius: var(--rounded-md);
-  padding: var(--space-1) 0;
-  box-shadow: var(--shadow-lg);
-  background-color: var(--color-neutral-100);
-  min-width: 20em;
-  outline: 1px solid var(--color-neutral-200);
-  display: flex;
-  flex-direction: column;
-`;
-
-export const MenuItem = styled.button.attrs({
-  className: 'MenuItem',
-})<{ $color?: ThemeColor }>`
-  display: flex;
-  align-items: center;
-  width: 100%;
-  font-family: var(--font-sans);
-  font-weight: normal;
-  text-align: left;
-  padding: var(--space-1) var(--space-2);
-  font-size: var(--text-base);
-  line-height: var(--leading-6);
-  border: none;
-  cursor: pointer;
-
-  ${({ $color }) =>
-    $color
-      ? css`
-          color: var(--color-${$color}-600);
-          background-color: var(--color-neutral-100);
-          &:hover {
-            background-color: var(--color-${$color}-200);
-          }
-        `
-      : css`
-          color: var(--color-neutral-900);
-          background-color: var(--color-neutral-100);
-          &:hover {
-            background-color: var(--color-neutral-200);
-          }
-        `}
-
-  svg {
-    fill: currentColor;
-    width: var(--space-4);
-    height: var(--space-4);
-    margin-right: var(--space-2);
-  }
-`;
+import styled from 'styled-components';
 
 export const InputContainer = styled.div.attrs({
   className: 'InputContainer',
 })`
   position: relative;
   border-radius: var(--rounded-md);
-  padding: 0 var(--space-2);
-  margin-top: var(--space-1);
+  padding: 0 var(--space-1);
 
   svg {
     position: absolute;
@@ -89,12 +30,20 @@ export const CheckboxesContainer = styled.div.attrs({
   font-weight: normal;
   user-select: none;
   padding: var(--space-2);
-  margin: var(--space-2);
-  border: 1px solid var(--color-neutral-200);
+  margin: var(--space-1);
+  margin-bottom: 0;
+  border: 1px solid var(--color-neutral-300);
   border-radius: var(--rounded-md);
   box-shadow: var(--shadow-inner);
-  background-color: var(--color-neutral-50);
+  background-color: var(--color-neutral-0);
   height: 20em;
   overflow-y: hidden;
   white-space: nowrap;
 `;
+
+export const Separator = styled.div.attrs({
+  className: 'Separator',
+})`
+  border-top: 1px solid var(--color-neutral-200);
+  margin: var(--space-1) 0;
+`;

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

@@ -1,12 +1,11 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
 
+import * as styles from './styles';
+
 import { DataGridContext } from './types';
-import { getScrollBarSize } from '../../../helpers/getScrollbarSize';
 import { useDataGridContext } from './hooks';
 
-const SCROLL_BAR_SIZE = getScrollBarSize();
-
 export const DataGridFooter = <R,>({
   context,
 }: {
@@ -17,28 +16,27 @@ export const DataGridFooter = <R,>({
     rows,
     selectedRows,
     sortedRows,
-    rowHeight = 48,
     selectable,
+    footers = {},
+    gridTemplateColumns,
+    footerFunctions,
   } = useDataGridContext(context);
 
+  if (!Object.keys(footers).length) {
+    return null;
+  }
+
   return (
-    <tfoot
-      style={{
-        paddingRight: `${SCROLL_BAR_SIZE[0]}px`,
-      }}
-    >
-      <tr
-        style={{
-          height: `${rowHeight}px`,
-        }}
-      >
-        {!!selectable && <div key="__select_checkbox__"></div>}
-        {visibleColumns.map(([key, col]) => (
-          <div key={key} style={{ width: (col.width ?? 150) + 'px' }}>
-            {col.footer?.(rows, sortedRows, selectedRows)}
-          </div>
-        ))}
-      </tr>
-    </tfoot>
+    <styles.DataGridFooterRow $gridTemplateColumns={gridTemplateColumns}>
+      {!!selectable && <styles.HeaderSelectionCell />}
+      {visibleColumns.map(([key, col]) => (
+        <styles.DataGridHeaderCellContainer
+          key={key}
+          style={{ width: (col.width ?? 150) + 'px' }}
+        >
+          {footerFunctions?.[key]?.(rows, sortedRows, selectedRows)}
+        </styles.DataGridHeaderCellContainer>
+      ))}
+    </styles.DataGridFooterRow>
   );
 };

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

@@ -102,11 +102,11 @@ export const DataGridHeader = <R,>({
         $headerColor={headerColor}
       >
         {!!selectable && (
-          <styles.HeaderSelectionCell $headerColor={headerColor}>
-            <IndeterminateCheckbox
-              checked={checkboxStatus}
-              onChange={() => toggleAll(!(checkboxStatus ?? true))}
-            />
+          <styles.HeaderSelectionCell
+            $headerColor={headerColor}
+            onClick={() => toggleAll(!(checkboxStatus ?? true))}
+          >
+            <IndeterminateCheckbox checked={checkboxStatus} readOnly />
           </styles.HeaderSelectionCell>
         )}
         {visibleColumns.map(([key, col], index) => (