@equinor/eds-data-grid-react 0.1.0-beta.3 → 0.3.0-rc

package/dist/types/EdsDataGridProps.d.ts

@@ -0,0 +1,204 @@
+import { Column, ColumnDef, ColumnPinningState, ColumnResizeMode, OnChangeFn, Row, RowSelectionState, SortingState, TableOptions } from '@tanstack/react-table';
+import { Virtualizer } from '@tanstack/react-virtual';
+import { CSSProperties, MutableRefObject, 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.
+     *
+     * No suffix (like `px` or `rem`) equals to `px`.
+     * @default 800
+     */
+    width?: string | number;
+    /**
+     * Min width of the table element.
+     *
+     * @example minWidth: 800
+     * @default none
+     */
+    minWidth?: string | number;
+    /**
+     * Height of the table.
+     *
+     * No suffix (like `px` or `rem`) equals to `px`.
+     * @default none
+     */
+    height?: string | number;
+    /**
+     * This optional function is used to derive a unique ID for any given row. If not provided the rows index is used (nested rows join together with `.` using their grandparents' index eg. `index.index.index`). If you need to identify individual rows that are originating from any server-side operations, it's suggested you use this function to return an ID that makes sense regardless of network IO/ambiguity eg. a userId, taskId, database ID field, etc.
+     * @example getRowId: row => row.userId
+     * @link [API Docs](https://tanstack.com/table/v8/docs/api/core/table#getrowid)
+     * @link [Guide](https://tanstack.com/table/v8/docs/guide/tables)
+     */
+    getRowId?: TableOptions<T>['getRowId'];
+};
+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;
+};
+type RefProps = {
+    rowVirtualizerInstanceRef?: MutableRefObject<Virtualizer<HTMLDivElement, Element> | null>;
+};
+export type EdsDataGridProps<T> = BaseProps<T> & StyleProps<T> & SortProps & FilterProps & PagingProps & ColumnProps & VirtualProps & RefProps & {
+    /**
+     * 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,3 @@
 export * from './EdsDataGrid';
+export * from './EdsDataGridProps';
+export * from './types';

package/dist/types/types.d.ts

@@ -0,0 +1,3 @@
+import type { Cell, CellContext, ColumnDef, ColumnPinningState, ColumnResizeMode, ColumnSort, ExpandedState, HeaderContext, OnChangeFn, Row, RowSelectionState, SortingState, Table, VisibilityState } from '@tanstack/react-table';
+import type { Virtualizer } from '@tanstack/react-virtual';
+export type { Cell, CellContext, ColumnDef, ColumnPinningState, ColumnResizeMode, ColumnSort, ExpandedState, HeaderContext, OnChangeFn, Row, RowSelectionState, SortingState, Table, VisibilityState, Virtualizer, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-data-grid-react",
-  "version": "0.1.0-beta.3",
+  "version": "0.3.0-rc",
   "description": "A feature-rich data-grid written in React, implementing the Equinor Design System",
   "license": "MIT",
   "types": "dist/types/index.d.ts",
@@ -16,62 +16,61 @@
   "peerDependencies": {
     "react": ">=16.8",
     "react-dom": ">=16.8",
-    "styled-components": ">=4.2"
+    "styled-components": ">=4.2",
+    "@equinor/eds-core-react": "^0.35.1"
   },
   "dependencies": {
-    "@tanstack/react-table": "^8.8.5",
-    "@tanstack/react-virtual": "^3.0.0-beta.54",
-    "@equinor/eds-core-react": "^0.33.0",
-    "@equinor/eds-icons": "^0.19.3",
+    "@tanstack/react-table": "^8.10.7",
+    "@tanstack/react-virtual": "^3.0.1",
+    "@equinor/eds-icons": "^0.21.0",
     "@equinor/eds-tokens": "0.9.2",
-    "@equinor/eds-utils": "^0.8.2"
+    "@equinor/eds-utils": "^0.8.3"
   },
   "devDependencies": {
-    "@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.3.0",
-    "@storybook/addon-actions": "^7.3.0",
-    "@storybook/addon-docs": "^7.3.0",
-    "@storybook/addon-essentials": "^7.3.0",
-    "@storybook/addon-links": "^7.3.0",
-    "@storybook/blocks": "^7.3.0",
-    "@storybook/builder-vite": "^7.3.0",
-    "@storybook/client-api": "^7.3.0",
-    "@storybook/react": "^7.3.0",
-    "@storybook/react-vite": "^7.3.0",
-    "@testing-library/dom": "^9.2.0",
-    "@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",
-    "@types/jest": "^29.5.0",
-    "@types/node": "18.14.2",
-    "@types/ramda": "^0.28.24",
-    "@types/react": "^18.0.21",
-    "@types/react-dom": "^18.0.10",
-    "@types/testing-library__jest-dom": "^5.14.5",
-    "babel-loader": "^9.1.2",
+    "@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.4.3",
-    "jest-environment-jsdom": "29.4.3",
-    "jest-styled-components": "^7.1.1",
+    "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.21",
-    "ramda": "^0.29.0",
+    "postcss": "^8.4.31",
+    "ramda": "^0.29.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.43.9",
-    "remark-gfm": "^3.0.1",
-    "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.3.0",
-    "styled-components": "6.0.8",
-    "ts-jest": "29.0.5",
+    "storybook": "^7.5.1",
+    "styled-components": "6.1.0",
+    "ts-jest": "29.1.1",
     "ts-node": "10.9.1",
-    "tsc-watch": "^6.0.0",
-    "typescript": "~5.1.6"
+    "tsc-watch": "^6.0.4",
+    "typescript": "~5.2.2"
   },
   "homepage": "https://eds.equinor.com",
   "repository": {
@@ -93,7 +92,6 @@
     "pnpm": ">=4",
     "node": ">=10.0.0"
   },
-  "browserslist": "defaults, not IE 11",
   "scripts": {
     "build": "rollup -c --bundleConfigAsCjs && tsc -p tsconfig.build.json",
     "test": "tsc -p tsconfig.spec.json && jest",