@equinor/eds-data-grid-react 0.1.0-beta.2 → 0.2.0

package/dist/types/EdsDataGrid.d.ts

@@ -1,133 +1,2 @@
-import { Column, ColumnDef, ColumnResizeMode, OnChangeFn, Row, RowSelectionState } from '@tanstack/react-table';
-import { CSSProperties, ReactElement } from 'react';
-export type EdsDataGridProps<T> = {
-    /**
-     * The rows to display in the table
-     */
-    rows: Array<T>;
-    /**
-     * Definition of the columns to display in the table
-     */
-    columns: ColumnDef<T>[];
-    /**
-     * The mode of column resizing. If not set, column resizing is disabled.
-     * Can be either 'onChange' or 'onEnd'
-     * @default undefined
-     */
-    columnResizeMode?: ColumnResizeMode;
-    /**
-     * Set this to enable rowSelection. If a function is provided, it will be called for each row to determine if it is selectable.
-     * @default false
-     */
-    rowSelection?: boolean | ((row: Row<T>) => boolean);
-    /**
-     * Callback for when row-selection changes
-     */
-    onSelectRow?: OnChangeFn<RowSelectionState>;
-    /**
-     * Enable debug mode. See https://tanstack.com/table/v8/docs/api/core/table#debugall
-     * @default false
-     */
-    debug?: boolean;
-    /**
-     * Enable sorting.
-     * @default false
-     */
-    enableSorting?: boolean;
-    /**
-     * Make the table header sticky
-     * @default false
-     */
-    stickyHeader?: boolean;
-    /**
-     * Element to display in Table.Caption
-     * @default undefined
-     */
-    caption?: ReactElement;
-    /**
-     * Whether to enable column filtering, adding inputs to the header cells
-     * Individual columns can be configured to disable filtering
-     * @default false
-     */
-    enableColumnFiltering?: boolean;
-    /**
-     * Whether pagination should be enabled.
-     * @default false
-     */
-    enablePagination?: boolean;
-    /**
-     * The number of rows per page
-     * Only used if enablePagination is true
-     * @default 25
-     */
-    pageSize?: number;
-    /**
-     * The message to display when there are no rows
-     * @default undefined
-     */
-    emptyMessage?: string;
-    /**
-     * The currently selected rows
-     * @default {}
-     */
-    selectedRows?: Record<string | number, boolean>;
-    /**
-     * Whether to enable virtualization. This will render only the visible rows currently in view.
-     * @default false
-     */
-    enableVirtual?: boolean;
-    /**
-     * The height of the virtualized table in pixels.
-     * @default 500
-     */
-    virtualHeight?: number;
-    /**
-     * Which columns are visible. If not set, all columns are visible. undefined means that the column is visible.
-     * @default undefined
-     */
-    columnVisibility?: Record<string, boolean>;
-    /**
-     * Callback for when column visibility changes. Only called if columnVisibility is set.
-     * @param columnVisibility
-     */
-    columnVisibilityChange?: (columnVisibility: Record<string, boolean>) => void;
-    /**
-     * An array of the columnIds in the order they should be displayed.
-     */
-    columnOrder?: Array<string>;
-    /**
-     * Function that can be used to set custom css on a cell
-     * @param row
-     * @param columnId
-     */
-    cellStyle?: (row: Row<T>, columnId: string) => CSSProperties;
-    /**
-     * Function that can be used to set a custom class on a cell
-     * @param row
-     * @param columnId
-     * @returns string with list of classes
-     */
-    cellClass?: (row: Row<T>, columnId: string) => string;
-    /**
-     * Function that can be used to set a custom class on a row
-     * @param row
-     * @returns string with list of classes
-     */
-    rowClass?: (row: Row<T>) => string;
-    /**
-     * Function that can be used to set custom css on a row
-     * @param row
-     */
-    rowStyle?: (row: Row<T>) => CSSProperties;
-    /**
-     * Function that can be used to set custom classes on a header cell
-     * @param column
-     */
-    headerClass?: (column: Column<T>) => string;
-    /**
-     * Function that can be used to set custom styles on a header cell
-     * @param column
-     */
-    headerStyle?: (column: Column<T>) => CSSProperties;
-};
-export declare function EdsDataGrid<T>({ rows, columns, columnResizeMode, pageSize, rowSelection, selectedRows, enableColumnFiltering, debug, enablePagination, enableSorting, stickyHeader, onSelectRow, caption, enableVirtual, virtualHeight, columnVisibility, columnVisibilityChange, emptyMessage, columnOrder, cellClass, cellStyle, rowClass, rowStyle, headerClass, headerStyle, }: EdsDataGridProps<T>): JSX.Element;
+import { EdsDataGridProps } from './EdsDataGridProps';
+export declare function EdsDataGrid<T>({ rows, columns, columnResizeMode, pageSize, rowSelection, selectedRows, enableColumnFiltering, debug, enablePagination, enableSorting, stickyHeader, onSelectRow, caption, enableVirtual, virtualHeight, columnVisibility, columnVisibilityChange, emptyMessage, columnOrder, cellClass, cellStyle, rowClass, rowStyle, headerClass, headerStyle, externalPaginator, onSortingChange, manualSorting, sortingState, columnPinState, scrollbarHorizontal, width, height, }: EdsDataGridProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/types/EdsDataGridContext.d.ts

@@ -15,6 +15,6 @@ type Context<T> = {
 export declare const EdsDataGridContext: import("react").Context<Context<any>>;
 export declare function TableProvider<T>({ children, ...props }: Context<T> & {
     children: ReactElement | Array<ReactElement>;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export declare const useTableContext: () => Context<any>;
 export {};

package/dist/types/EdsDataGridProps.d.ts

@@ -0,0 +1,182 @@
+import { Column, ColumnDef, ColumnPinningState, ColumnResizeMode, OnChangeFn, Row, RowSelectionState, SortingState } from '@tanstack/react-table';
+import { CSSProperties, ReactElement } from 'react';
+type BaseProps<T> = {
+    /**
+     * The rows to display in the table
+     */
+    rows: Array<T>;
+    /**
+     * Definition of the columns to display in the table
+     */
+    columns: ColumnDef<T>[];
+    /**
+     * The mode of column resizing. If not set, column resizing is disabled.
+     * Can be either 'onChange' or 'onEnd'
+     * @default undefined
+     */
+    columnResizeMode?: ColumnResizeMode;
+    /**
+     * Set this to enable rowSelection. If a function is provided, it will be called for each row to determine if it is selectable.
+     * @default false
+     */
+    rowSelection?: boolean | ((row: Row<T>) => boolean);
+    /**
+     * Callback for when row-selection changes
+     */
+    onSelectRow?: OnChangeFn<RowSelectionState>;
+    /**
+     * Enable debug mode. See https://tanstack.com/table/v8/docs/api/core/table#debugall
+     * @default false
+     */
+    debug?: boolean;
+    /**
+     * Make the table header sticky
+     * @default false
+     */
+    stickyHeader?: boolean;
+    /**
+     * Element to display in Table.Caption
+     * @default undefined
+     */
+    caption?: ReactElement;
+    /**
+     * The message to display when there are no rows
+     * @default undefined
+     */
+    emptyMessage?: string;
+    /**
+     * The currently selected rows
+     * @default {}
+     */
+    selectedRows?: Record<string | number, boolean>;
+    /**
+     * Whether there should be horizontal scrolling.
+     * This must be true for column pinning to work
+     * @default true
+     */
+    scrollbarHorizontal?: boolean;
+    /**
+     * Width of the table. Only takes effect if {@link scrollbarHorizontal} is true.
+     * @default 800
+     */
+    width?: number;
+    /**
+     * Height of the table.
+     * @default none
+     */
+    height?: number;
+};
+type StyleProps<T> = {
+    /**
+     * Function that can be used to set custom css on a cell
+     * @param row
+     * @param columnId
+     */
+    cellStyle?: (row: Row<T>, columnId: string) => CSSProperties;
+    /**
+     * Function that can be used to set a custom class on a cell
+     * @param row
+     * @param columnId
+     * @returns string with list of classes
+     */
+    cellClass?: (row: Row<T>, columnId: string) => string;
+    /**
+     * Function that can be used to set a custom class on a row
+     * @param row
+     * @returns string with list of classes
+     */
+    rowClass?: (row: Row<T>) => string;
+    /**
+     * Function that can be used to set custom css on a row
+     * @param row
+     */
+    rowStyle?: (row: Row<T>) => CSSProperties;
+    /**
+     * Function that can be used to set custom classes on a header cell
+     * @param column
+     */
+    headerClass?: (column: Column<T>) => string;
+    /**
+     * Function that can be used to set custom styles on a header cell
+     * @param column
+     */
+    headerStyle?: (column: Column<T>) => CSSProperties;
+};
+type FilterProps = {
+    /**
+     * Whether to enable column filtering, adding inputs to the header cells
+     * Individual columns can be configured to disable filtering
+     * @default false
+     */
+    enableColumnFiltering?: boolean;
+};
+type PagingProps = {
+    /**
+     * Whether pagination should be enabled.
+     * @default false
+     */
+    enablePagination?: boolean;
+    /**
+     * The number of rows per page
+     * Only used if enablePagination is true
+     * @default 25
+     */
+    pageSize?: number;
+    /**
+     * Add this if you want to implement a custom pagination component
+     * Useful for e.g server-side paging
+     */
+    externalPaginator?: ReactElement;
+};
+type VirtualProps = {
+    /**
+     * Whether to enable virtualization. This will render only the visible rows currently in view.
+     * @default false
+     */
+    enableVirtual?: boolean;
+    /**
+     * The height of the virtualized table in pixels.
+     * @default 500
+     */
+    virtualHeight?: number;
+};
+type SortProps = {
+    /**
+     * Enable sorting.
+     * @default false
+     */
+    enableSorting?: boolean;
+    /**
+     * Method to call when sorting changes
+     */
+    onSortingChange?: OnChangeFn<SortingState>;
+    /**
+     * Enable manual sorting, useful for server-side sorting.
+     * @default false
+     */
+    manualSorting?: boolean;
+    /**
+     * Override the default sorting state
+     */
+    sortingState?: SortingState;
+};
+type ColumnProps = {
+    columnPinState?: ColumnPinningState;
+};
+export type EdsDataGridProps<T> = BaseProps<T> & StyleProps<T> & SortProps & FilterProps & PagingProps & ColumnProps & VirtualProps & {
+    /**
+     * Which columns are visible. If not set, all columns are visible. undefined means that the column is visible.
+     * @default undefined
+     */
+    columnVisibility?: Record<string, boolean>;
+    /**
+     * Callback for when column visibility changes. Only called if columnVisibility is set.
+     * @param columnVisibility
+     */
+    columnVisibilityChange?: (columnVisibility: Record<string, boolean>) => void;
+    /**
+     * An array of the columnIds in the order they should be displayed.
+     */
+    columnOrder?: Array<string>;
+};
+export {};

package/dist/types/components/DebouncedInput.d.ts

@@ -1,9 +1,10 @@
 import { InputHTMLAttributes } from 'react';
 type Value = string | number | Array<string | number>;
-export declare function DebouncedInput({ value: initialValue, values, onChange, debounce, ...props }: {
+export declare function DebouncedInput({ value: initialValue, values, onChange, debounce, label, ...props }: {
     value: Value;
     values: Array<string | number>;
     onChange: (value: Value) => void;
     debounce?: number;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>): JSX.Element;
+    label?: string;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/Filter.d.ts

@@ -3,5 +3,5 @@ type FilterProps<T = unknown> = {
     column: Column<T>;
     table: TanStackTable<T>;
 };
-export declare function Filter<T = unknown>({ column, table }: FilterProps<T>): JSX.Element;
+export declare function Filter<T = unknown>({ column, table }: FilterProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/TableBodyCell.d.ts

@@ -2,5 +2,5 @@ import { Cell } from '@tanstack/react-table';
 type Props<T> = {
     cell: Cell<T, unknown>;
 };
-export declare function TableBodyCell<T>({ cell }: Props<T>): JSX.Element;
+export declare function TableBodyCell<T>({ cell }: Props<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/TableHeaderCell.d.ts

@@ -5,5 +5,5 @@ type Props<T> = {
     deltaOffset: number | null;
     table: TanStackTable<T>;
 };
-export declare function TableHeaderCell<T>({ header, columnResizeMode }: Props<T>): JSX.Element;
+export declare function TableHeaderCell<T>({ header, columnResizeMode }: Props<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/TableHeaderRow.d.ts

@@ -5,5 +5,5 @@ type Props<T> = {
     deltaOffset: number | null;
     table: TanStackTable<T>;
 };
-export declare function TableHeaderRow<T>({ headerGroup, columnResizeMode, deltaOffset, table, }: Props<T>): JSX.Element;
+export declare function TableHeaderRow<T>({ headerGroup, columnResizeMode, deltaOffset, table, }: Props<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/TableRow.d.ts

@@ -3,5 +3,5 @@ import { HTMLAttributes } from 'react';
 type Props<T> = {
     row: Row<T>;
 } & HTMLAttributes<HTMLTableRowElement>;
-export declare function TableRow<T>({ row }: Props<T>): JSX.Element;
+export declare function TableRow<T>({ row }: Props<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/index.d.ts

@@ -1 +1,2 @@
 export * from './EdsDataGrid';
+export * from './EdsDataGridProps';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-data-grid-react",
-  "version": "0.1.0-beta.2",
+  "version": "0.2.0",
   "description": "A feature-rich data-grid written in React, implementing the Equinor Design System",
   "license": "MIT",
   "types": "dist/types/index.d.ts",
@@ -16,63 +16,61 @@
   "peerDependencies": {
     "react": ">=16.8",
     "react-dom": ">=16.8",
-    "styled-components": ">=4.2 < 6"
+    "styled-components": ">=4.2"
   },
   "dependencies": {
-    "@tanstack/react-table": "^8.8.5",
+    "@tanstack/react-table": "^8.10.7",
     "@tanstack/react-virtual": "^3.0.0-beta.54",
-    "@equinor/eds-core-react": "^0.32.2",
-    "@equinor/eds-tokens": "0.9.2",
-    "@equinor/eds-icons": "^0.19.2",
-    "@equinor/eds-utils": "^0.8.0"
+    "@equinor/eds-core-react": "^0.35.0",
+    "@equinor/eds-icons": "^0.20.0",
+    "@equinor/eds-utils": "^0.8.3",
+    "@equinor/eds-tokens": "0.9.2"
   },
   "devDependencies": {
-    "typescript": "~4.9.5",
-    "ts-jest": "29.0.5",
-    "ts-node": "10.9.1",
-    "@types/node": "18.14.2",
-    "jest": "29.4.3",
-    "jest-environment-jsdom": "29.4.3",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@mdx-js/react": "2.3.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@storybook/addon-a11y": "^7.5.1",
+    "@storybook/addon-actions": "^7.5.1",
+    "@storybook/addon-docs": "^7.5.1",
+    "@storybook/addon-essentials": "^7.5.1",
+    "@storybook/addon-links": "^7.5.1",
+    "@storybook/blocks": "^7.5.1",
+    "@storybook/builder-vite": "^7.5.1",
+    "@storybook/client-api": "^7.5.1",
+    "@storybook/react": "^7.5.1",
+    "@storybook/react-vite": "^7.5.1",
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "14.0.0",
-    "@testing-library/user-event": "^14.4.3",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/jest": "^29.5.6",
+    "@types/node": "20.8.9",
+    "@types/ramda": "^0.29.7",
+    "@types/react": "^18.2.33",
+    "@types/react-dom": "^18.2.14",
+    "babel-loader": "^9.1.3",
+    "babel-plugin-styled-components": "^2.1.4",
+    "jest": "29.7.0",
+    "jest-environment-jsdom": "29.7.0",
+    "jest-styled-components": "^7.2.0",
+    "js-file-download": "^0.4.12",
+    "postcss": "^8.4.31",
+    "ramda": "^0.29.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@types/jest": "^29.5.0",
-    "@types/react": "^18.0.21",
-    "@types/react-dom": "^18.0.10",
-    "@types/styled-components": "^5.1.26",
-    "rollup": "^3.25.1",
+    "react-hook-form": "^7.47.0",
+    "remark-gfm": "^4.0.0",
+    "rollup": "^4.2.0",
     "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-postcss": "^4.0.2",
-    "storybook": "^7.0.11",
-    "styled-components": "5.3.9",
-    "@mdx-js/react": "1.6.22",
-    "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-commonjs": "^25.0.1",
-    "@rollup/plugin-node-resolve": "^15.1.0",
-    "@storybook/addon-a11y": "^7.0.11",
-    "@storybook/addon-actions": "^7.0.11",
-    "@storybook/addon-docs": "^7.0.11",
-    "@storybook/addon-essentials": "^7.0.11",
-    "@storybook/addon-links": "^7.0.11",
-    "@storybook/blocks": "^7.0.11",
-    "@storybook/builder-vite": "^7.0.11",
-    "@storybook/client-api": "^7.0.11",
-    "@storybook/react": "^7.0.11",
-    "@storybook/react-vite": "^7.0.11",
-    "@testing-library/dom": "^9.2.0",
-    "@types/ramda": "^0.28.24",
-    "@types/testing-library__jest-dom": "^5.14.5",
-    "babel-loader": "^9.1.2",
-    "babel-plugin-styled-components": "^2.1.1",
-    "jest-styled-components": "^7.1.1",
-    "js-file-download": "^0.4.12",
-    "postcss": "^8.4.21",
-    "ramda": "^0.29.0",
-    "react-hook-form": "^7.43.9",
-    "remark-gfm": "^3.0.1",
-    "tsc-watch": "^6.0.0"
+    "storybook": "^7.5.1",
+    "styled-components": "6.1.0",
+    "ts-jest": "29.1.1",
+    "ts-node": "10.9.1",
+    "tsc-watch": "^6.0.4",
+    "typescript": "~5.2.2"
   },
   "homepage": "https://eds.equinor.com",
   "repository": {