@equinor/apollo-components 1.1.1 → 1.2.0

package/dist/index.d.ts

@@ -1,6 +1,8 @@
 import { IconData } from '@equinor/eds-icons';
-import { ReactNode } from 'react';
-import { ColumnDef } from '@tanstack/react-table';
+import { ReactNode, ComponentProps } from 'react';
+import { ColumnDef, RowSelectionState, SortingState } from '@tanstack/react-table';
+import * as jotai from 'jotai';
+import { Provider } from 'jotai';
 
 interface AppShellProps {
     children?: ReactNode;
@@ -29,6 +31,7 @@ interface DataTableConfig {
     height?: string;
     sortable?: boolean;
     virtual?: boolean;
+    enableRowSelection?: boolean;
     width?: string;
 }
 
@@ -40,6 +43,24 @@ interface DataTableProps<T> {
     filters?: FilterConfig;
     header?: HeaderConfig;
 }
-declare function DataTable<T>({ columns, data, header, filters, config }: DataTableProps<T>): JSX.Element;
+declare function DataTable$1<T>({ columns, data, header, filters, config }: DataTableProps<T>): JSX.Element;
 
-export { AppShell, AppSidebar, ChipsCell, DataTable, DataTableConfig, FilterConfig, HeaderConfig };
+declare type DataTableProviderProps = ComponentProps<typeof Provider>;
+declare function DataTableProvider({ children, ...props }: DataTableProviderProps): JSX.Element;
+
+declare const globalFilterAtom: jotai.PrimitiveAtom<string> & {
+    init: string;
+};
+declare const rowSelectionAtom: jotai.PrimitiveAtom<RowSelectionState> & {
+    init: RowSelectionState;
+};
+declare const tableSortingAtom: jotai.PrimitiveAtom<SortingState> & {
+    init: SortingState;
+};
+
+declare type DataTableCompoundProps = typeof DataTable$1 & {
+    Provider: typeof DataTableProvider;
+};
+declare const DataTable: DataTableCompoundProps;
+
+export { AppShell, AppSidebar, ChipsCell, DataTable, DataTableConfig, FilterConfig, HeaderConfig, globalFilterAtom, rowSelectionAtom, tableSortingAtom };

package/dist/index.js

@@ -29,7 +29,10 @@ __export(src_exports, {
   AppShell: () => AppShell,
   AppSidebar: () => AppSidebar,
   ChipsCell: () => ChipsCell,
-  DataTable: () => DataTable
+  DataTable: () => DataTable2,
+  globalFilterAtom: () => globalFilterAtom,
+  rowSelectionAtom: () => rowSelectionAtom,
+  tableSortingAtom: () => tableSortingAtom
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -176,8 +179,16 @@ var ChipsCell = (props) => {
 
 // src/DataTable/DataTable.tsx
 var import_react_table4 = require("@tanstack/react-table");
-var import_react3 = require("react");
-var import_styled_components7 = __toESM(require("styled-components"));
+var import_jotai3 = require("jotai");
+var import_react4 = require("react");
+var import_styled_components8 = __toESM(require("styled-components"));
+
+// src/DataTable/atoms.ts
+var import_jotai = require("jotai");
+var columnVisibilityAtom = (0, import_jotai.atom)({});
+var globalFilterAtom = (0, import_jotai.atom)("");
+var rowSelectionAtom = (0, import_jotai.atom)({});
+var tableSortingAtom = (0, import_jotai.atom)([]);
 
 // src/DataTable/components/BasicTable.tsx
 var import_eds_core_react5 = require("@equinor/eds-core-react");
@@ -248,38 +259,154 @@ function BasicTable({ table, stickyHeader }) {
   });
 }
 
-// src/DataTable/components/DataTableHeader.tsx
-var import_eds_core_react7 = require("@equinor/eds-core-react");
-var import_styled_components6 = __toESM(require("styled-components"));
-
-// src/DataTable/filters/DebouncedInput.tsx
+// src/DataTable/components/ColumnSelect.tsx
 var import_eds_core_react6 = require("@equinor/eds-core-react");
+var import_eds_icons4 = require("@equinor/eds-icons");
 var import_react2 = require("react");
 var import_styled_components5 = __toESM(require("styled-components"));
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var Wrapper3 = import_styled_components5.default.div`
-  width: 300px;
+var ColumnSelectContent = import_styled_components5.default.div`
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 0.5rem;
+`;
+var ActionsWrapper = import_styled_components5.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.5rem;
+`;
+function ColumnSelect({ table }) {
+  const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
+  const referenceElement = (0, import_react2.useRef)(null);
+  const selectableColumns = table.getAllLeafColumns().filter((column) => column.id !== "select");
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, {
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_eds_core_react6.Button, {
+        "aria-haspopup": true,
+        id: "column-select-anchor",
+        "aria-controls": "column-select-popover",
+        "aria-expanded": isOpen,
+        ref: referenceElement,
+        variant: "ghost_icon",
+        onClick: () => setIsOpen(true),
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_eds_core_react6.Icon, {
+          name: "view_column",
+          data: import_eds_icons4.view_column
+        })
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_eds_core_react6.Popover, {
+        open: isOpen,
+        id: "column-select-popover",
+        anchorEl: referenceElement.current,
+        placement: "bottom-end",
+        onClose: () => setIsOpen(false),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_eds_core_react6.Popover.Header, {
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_eds_core_react6.Popover.Title, {
+                children: "Column settings"
+              }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_eds_core_react6.Button, {
+                variant: "ghost_icon",
+                "aria-label": "Close column select",
+                onClick: () => setIsOpen(false),
+                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_eds_core_react6.Icon, {
+                  name: "close",
+                  data: import_eds_icons4.close,
+                  size: 24
+                })
+              })
+            ]
+          }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_eds_core_react6.Popover.Content, {
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ColumnSelectContent, {
+                children: selectableColumns.map((column) => {
+                  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_eds_core_react6.Checkbox, {
+                    checked: column.getIsVisible(),
+                    label: column.id,
+                    onChange: column.getToggleVisibilityHandler()
+                  }, column.id);
+                })
+              }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_eds_core_react6.Divider, {
+                variant: "small"
+              }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ActionsWrapper, {
+                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_eds_core_react6.Button, {
+                  color: "secondary",
+                  variant: "ghost",
+                  disabled: table.getIsAllColumnsVisible(),
+                  onClick: () => table.toggleAllColumnsVisible(true),
+                  children: "Reset to default"
+                })
+              })
+            ]
+          })
+        ]
+      })
+    ]
+  });
+}
+
+// src/DataTable/components/DataTableHeader.tsx
+var import_eds_core_react8 = require("@equinor/eds-core-react");
+var import_eds_icons6 = require("@equinor/eds-icons");
+var import_jotai2 = require("jotai");
+var import_styled_components7 = __toESM(require("styled-components"));
+
+// src/DataTable/filters/DebouncedInput.tsx
+var import_eds_core_react7 = require("@equinor/eds-core-react");
+var import_eds_icons5 = require("@equinor/eds-icons");
+var import_react3 = require("react");
+var import_styled_components6 = __toESM(require("styled-components"));
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Wrapper3 = import_styled_components6.default.div`
+  width: 200px;
+`;
+var CloseButton = (0, import_styled_components6.default)(import_eds_core_react7.Button)`
+  width: 24px;
+  height: 24px;
 `;
 function DebouncedInput({
   value: initialValue,
   onChange,
+  icon,
   debounce = 500,
   ...props
 }) {
-  const [value, setValue] = (0, import_react2.useState)(initialValue);
-  (0, import_react2.useEffect)(() => {
+  const [value, setValue] = (0, import_react3.useState)(initialValue);
+  (0, import_react3.useEffect)(() => {
     setValue(initialValue);
   }, [initialValue]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     const timeout = setTimeout(() => {
       onChange(value);
     }, debounce);
     return () => clearTimeout(timeout);
   }, [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Wrapper3, {
-    children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_eds_core_react6.Input, {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Wrapper3, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.Input, {
       ...props,
       value,
+      leftAdornments: icon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.Icon, {
+        name: icon.name,
+        data: icon,
+        size: 18
+      }),
+      rightAdornments: !!value && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.Tooltip, {
+        title: "Clear input",
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CloseButton, {
+          variant: "ghost_icon",
+          onClick: () => setValue(""),
+          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.Icon, {
+            name: import_eds_icons5.close.name,
+            data: import_eds_icons5.close,
+            size: 18
+          })
+        })
+      }),
       onChange: (event) => setValue(event.target.value)
     })
   });
@@ -296,94 +423,98 @@ var fuzzyFilter = (row, columnId, value, addMeta) => {
 };
 
 // src/DataTable/components/DataTableHeader.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var DataTableHeaderWrapper = import_styled_components6.default.div`
-  & > * + * {
-    margin-top: 0.5rem;
-  }
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var DataTableHeaderWrapper = import_styled_components7.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   gap: 0.5rem;
   padding: ${(props) => props.captionPadding ?? "1rem"};
 `;
-var FilterContainer = import_styled_components6.default.div`
+var FilterContainer = import_styled_components7.default.div`
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 1rem;
+  justify-content: flex-end;
 `;
 var DataTableHeader = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(DataTableHeaderWrapper, {
+  const [globalFilter, setGlobalFilter] = (0, import_jotai2.useAtom)(globalFilterAtom);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(DataTableHeaderWrapper, {
     className: "--table-caption",
     captionPadding: props.captionPadding,
     children: [
-      (props == null ? void 0 : props.tableCaption) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.Typography, {
-        variant: "h2",
+      (props == null ? void 0 : props.tableCaption) && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Typography, {
+        variant: "h3",
         children: props == null ? void 0 : props.tableCaption
       }),
-      (props == null ? void 0 : props.enableGlobalFilter) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FilterContainer, {
+      (props == null ? void 0 : props.enableGlobalFilter) && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(FilterContainer, {
         className: "--filter-container",
-        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DebouncedInput, {
-          value: props.globalFilter ?? "",
-          placeholder: (props == null ? void 0 : props.globalFilterPlaceholder) ?? "Search all columns",
-          onChange: (value) => {
-            var _a;
-            return (_a = props.setGlobalFilter) == null ? void 0 : _a.call(props, String(value));
-          }
-        })
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DebouncedInput, {
+            value: globalFilter,
+            icon: import_eds_icons6.search,
+            placeholder: (props == null ? void 0 : props.globalFilterPlaceholder) ?? "Search all columns",
+            onChange: (value) => setGlobalFilter(String(value))
+          }),
+          props.filterActions
+        ]
       })
     ]
   });
 };
 
 // src/DataTable/components/VirtualTable.tsx
-var import_eds_core_react9 = require("@equinor/eds-core-react");
+var import_eds_core_react10 = require("@equinor/eds-core-react");
 var import_react_table3 = require("@tanstack/react-table");
 var import_react_virtual = require("@tanstack/react-virtual");
 
 // src/DataTable/components/PaddingRow.tsx
-var import_eds_core_react8 = require("@equinor/eds-core-react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_eds_core_react9 = require("@equinor/eds-core-react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var PaddingRow = (props) => {
   if (!props.height)
     return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Table.Row, {
-    children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Table.Cell, {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react9.Table.Row, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react9.Table.Cell, {
       style: { height: `${props.height}px` }
     })
   });
 };
 
 // src/DataTable/components/VirtualTable.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function VirtualTable({ table, containerRef, ...props }) {
   var _a, _b;
   const { rows } = table.getRowModel();
-  const rowVirtualizer = (0, import_react_virtual.useVirtual)({
-    overscan: 10,
-    size: rows.length,
-    parentRef: containerRef
+  const rowVirtualizer = (0, import_react_virtual.useVirtualizer)({
+    count: rows.length,
+    estimateSize: () => 35,
+    getScrollElement: () => containerRef.current
   });
-  const { virtualItems: virtualRows, totalSize } = rowVirtualizer;
+  const virtualRows = rowVirtualizer.getVirtualItems();
   const paddingTop = virtualRows.length > 0 ? ((_a = virtualRows == null ? void 0 : virtualRows[0]) == null ? void 0 : _a.start) || 0 : 0;
-  const paddingBottom = virtualRows.length > 0 ? totalSize - (((_b = virtualRows == null ? void 0 : virtualRows[virtualRows.length - 1]) == null ? void 0 : _b.end) || 0) : 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_eds_core_react9.Table, {
+  const paddingBottom = virtualRows.length > 0 ? rowVirtualizer.getTotalSize() - (((_b = virtualRows == null ? void 0 : virtualRows[virtualRows.length - 1]) == null ? void 0 : _b.end) || 0) : 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_eds_core_react10.Table, {
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TableHeader, {
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TableHeader, {
         sticky: props.stickyHeader,
         table
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_eds_core_react9.Table.Body, {
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_eds_core_react10.Table.Body, {
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PaddingRow, {
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PaddingRow, {
             height: paddingTop
           }),
           virtualRows.map((virtualRow) => {
             const row = rows[virtualRow.index];
-            return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react9.Table.Row, {
-              children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react9.Table.Cell, {
+            return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Table.Row, {
+              active: row.getIsSelected(),
+              children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Table.Cell, {
                 children: (0, import_react_table3.flexRender)(cell.column.columnDef.cell, cell.getContext())
               }, cell.id))
             }, row.id);
           }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PaddingRow, {
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PaddingRow, {
             height: paddingBottom
           })
         ]
@@ -392,14 +523,42 @@ function VirtualTable({ table, containerRef, ...props }) {
   });
 }
 
-// src/DataTable/utils.ts
+// src/DataTable/utils.tsx
+var import_eds_core_react11 = require("@equinor/eds-core-react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function enableOrUndefined(enabled, value) {
   return Boolean(enabled) ? value : void 0;
 }
+function prependSelectColumnIfEnabled(columns, config) {
+  if (!(config == null ? void 0 : config.enableRowSelection))
+    return columns;
+  const selectColumn = {
+    id: "select",
+    header: ({ table }) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", {
+      style: { width: "48px" },
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_eds_core_react11.Checkbox, {
+        checked: table.getIsAllRowsSelected(),
+        indeterminate: table.getIsSomeRowsSelected(),
+        "aria-label": table.getIsAllRowsSelected() ? "Deselect all rows" : "Select all rows",
+        onChange: table.getToggleAllRowsSelectedHandler()
+      })
+    }),
+    cell: ({ row }) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", {
+      style: { width: "48px" },
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_eds_core_react11.Checkbox, {
+        checked: row.getIsSelected(),
+        indeterminate: row.getIsSomeSelected(),
+        "aria-label": `Select ${row.getValue("name")}`,
+        onChange: row.getToggleSelectedHandler()
+      })
+    })
+  };
+  return [selectColumn, ...columns];
+}
 
 // src/DataTable/DataTable.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var DataTableWrapper = import_styled_components7.default.div`
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var DataTableWrapper = import_styled_components8.default.div`
   width: ${(props) => props.width ?? "100%"};
 
   .--table-container {
@@ -413,48 +572,55 @@ var DataTableWrapper = import_styled_components7.default.div`
   }
 `;
 function DataTable({ columns, data, header, filters, config }) {
-  const [globalFilter, setGlobalFilter] = (0, import_react3.useState)("");
+  const [columnVisibility, setColumnVisibility] = (0, import_jotai3.useAtom)(columnVisibilityAtom);
+  const [globalFilter, setGlobalFilter] = (0, import_jotai3.useAtom)(globalFilterAtom);
+  const [sorting, setSorting] = (0, import_jotai3.useAtom)(tableSortingAtom);
+  const [rowSelectionState, setRowSelectionState] = (0, import_jotai3.useAtom)(rowSelectionAtom);
   function enableGlobalFilter(value) {
     return enableOrUndefined(filters == null ? void 0 : filters.globalFilter, value);
   }
-  const [sorting, setSorting] = (0, import_react3.useState)([]);
   const table = (0, import_react_table4.useReactTable)({
-    columns,
+    columns: prependSelectColumnIfEnabled(columns, config),
     data,
     getCoreRowModel: (0, import_react_table4.getCoreRowModel)(),
     getFilteredRowModel: enableGlobalFilter((0, import_react_table4.getFilteredRowModel)()),
     globalFilterFn: enableGlobalFilter(fuzzyFilter),
     state: {
       globalFilter: enableGlobalFilter(globalFilter),
-      sorting
+      sorting: enableOrUndefined(config == null ? void 0 : config.sortable, sorting),
+      rowSelection: rowSelectionState,
+      columnVisibility
     },
+    onRowSelectionChange: setRowSelectionState,
     enableSorting: config == null ? void 0 : config.sortable,
-    onSortingChange: setSorting,
+    onSortingChange: enableOrUndefined(config == null ? void 0 : config.sortable, setSorting),
     getSortedRowModel: (0, import_react_table4.getSortedRowModel)(),
+    onColumnVisibilityChange: setColumnVisibility,
     onGlobalFilterChange: enableGlobalFilter(setGlobalFilter)
   });
-  const tableContainerRef = (0, import_react3.useRef)(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(DataTableWrapper, {
+  const tableContainerRef = (0, import_react4.useRef)(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(DataTableWrapper, {
     captionPadding: header == null ? void 0 : header.captionPadding,
     height: config == null ? void 0 : config.height,
     width: config == null ? void 0 : config.width,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DataTableHeader, {
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DataTableHeader, {
         tableCaption: header == null ? void 0 : header.tableCaption,
         enableGlobalFilter: filters == null ? void 0 : filters.globalFilter,
-        globalFilter,
-        setGlobalFilter,
         globalFilterPlaceholder: filters == null ? void 0 : filters.globalFilterPlaceholder,
-        captionPadding: header == null ? void 0 : header.captionPadding
+        captionPadding: header == null ? void 0 : header.captionPadding,
+        filterActions: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ColumnSelect, {
+          table
+        })
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", {
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", {
         ref: tableContainerRef,
         className: "--table-container",
-        children: (config == null ? void 0 : config.virtual) ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(VirtualTable, {
+        children: (config == null ? void 0 : config.virtual) ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(VirtualTable, {
           containerRef: tableContainerRef,
           table,
           stickyHeader: header == null ? void 0 : header.stickyHeader
-        }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BasicTable, {
+        }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(BasicTable, {
           table,
           stickyHeader: header == null ? void 0 : header.stickyHeader
         })
@@ -462,10 +628,27 @@ function DataTable({ columns, data, header, filters, config }) {
     ]
   });
 }
+
+// src/DataTable/Provider.tsx
+var import_jotai4 = require("jotai");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function DataTableProvider({ children, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jotai4.Provider, {
+    ...props,
+    children
+  });
+}
+
+// src/DataTable/index.ts
+var DataTable2 = DataTable;
+DataTable2.Provider = DataTableProvider;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AppShell,
   AppSidebar,
   ChipsCell,
-  DataTable
+  DataTable,
+  globalFilterAtom,
+  rowSelectionAtom,
+  tableSortingAtom
 });

package/dist/index.mjs

@@ -146,8 +146,16 @@ import {
   getSortedRowModel,
   useReactTable
 } from "@tanstack/react-table";
-import { useRef, useState as useState3 } from "react";
-import styled7 from "styled-components";
+import { useAtom as useAtom2 } from "jotai";
+import { useRef as useRef2 } from "react";
+import styled8 from "styled-components";
+
+// src/DataTable/atoms.ts
+import { atom } from "jotai";
+var columnVisibilityAtom = atom({});
+var globalFilterAtom = atom("");
+var rowSelectionAtom = atom({});
+var tableSortingAtom = atom([]);
 
 // src/DataTable/components/BasicTable.tsx
 import { Table as EdsTable } from "@equinor/eds-core-react";
@@ -218,25 +226,124 @@ function BasicTable({ table, stickyHeader }) {
   });
 }
 
+// src/DataTable/components/ColumnSelect.tsx
+import { Button as Button2, Checkbox, Divider, Icon as Icon4, Popover } from "@equinor/eds-core-react";
+import { close, view_column } from "@equinor/eds-icons";
+import { useRef, useState as useState2 } from "react";
+import styled5 from "styled-components";
+import { Fragment, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var ColumnSelectContent = styled5.div`
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 0.5rem;
+`;
+var ActionsWrapper = styled5.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.5rem;
+`;
+function ColumnSelect({ table }) {
+  const [isOpen, setIsOpen] = useState2(false);
+  const referenceElement = useRef(null);
+  const selectableColumns = table.getAllLeafColumns().filter((column) => column.id !== "select");
+  return /* @__PURE__ */ jsxs5(Fragment, {
+    children: [
+      /* @__PURE__ */ jsx7(Button2, {
+        "aria-haspopup": true,
+        id: "column-select-anchor",
+        "aria-controls": "column-select-popover",
+        "aria-expanded": isOpen,
+        ref: referenceElement,
+        variant: "ghost_icon",
+        onClick: () => setIsOpen(true),
+        children: /* @__PURE__ */ jsx7(Icon4, {
+          name: "view_column",
+          data: view_column
+        })
+      }),
+      /* @__PURE__ */ jsxs5(Popover, {
+        open: isOpen,
+        id: "column-select-popover",
+        anchorEl: referenceElement.current,
+        placement: "bottom-end",
+        onClose: () => setIsOpen(false),
+        children: [
+          /* @__PURE__ */ jsxs5(Popover.Header, {
+            children: [
+              /* @__PURE__ */ jsx7(Popover.Title, {
+                children: "Column settings"
+              }),
+              /* @__PURE__ */ jsx7(Button2, {
+                variant: "ghost_icon",
+                "aria-label": "Close column select",
+                onClick: () => setIsOpen(false),
+                children: /* @__PURE__ */ jsx7(Icon4, {
+                  name: "close",
+                  data: close,
+                  size: 24
+                })
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs5(Popover.Content, {
+            children: [
+              /* @__PURE__ */ jsx7(ColumnSelectContent, {
+                children: selectableColumns.map((column) => {
+                  return /* @__PURE__ */ jsx7(Checkbox, {
+                    checked: column.getIsVisible(),
+                    label: column.id,
+                    onChange: column.getToggleVisibilityHandler()
+                  }, column.id);
+                })
+              }),
+              /* @__PURE__ */ jsx7(Divider, {
+                variant: "small"
+              }),
+              /* @__PURE__ */ jsx7(ActionsWrapper, {
+                children: /* @__PURE__ */ jsx7(Button2, {
+                  color: "secondary",
+                  variant: "ghost",
+                  disabled: table.getIsAllColumnsVisible(),
+                  onClick: () => table.toggleAllColumnsVisible(true),
+                  children: "Reset to default"
+                })
+              })
+            ]
+          })
+        ]
+      })
+    ]
+  });
+}
+
 // src/DataTable/components/DataTableHeader.tsx
 import { Typography } from "@equinor/eds-core-react";
-import styled6 from "styled-components";
+import { search } from "@equinor/eds-icons";
+import { useAtom } from "jotai";
+import styled7 from "styled-components";
 
 // src/DataTable/filters/DebouncedInput.tsx
-import { Input } from "@equinor/eds-core-react";
-import { useEffect, useState as useState2 } from "react";
-import styled5 from "styled-components";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var Wrapper3 = styled5.div`
-  width: 300px;
+import { Button as Button3, Icon as Icon5, Input, Tooltip } from "@equinor/eds-core-react";
+import { close as close2 } from "@equinor/eds-icons";
+import { useEffect, useState as useState3 } from "react";
+import styled6 from "styled-components";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var Wrapper3 = styled6.div`
+  width: 200px;
+`;
+var CloseButton = styled6(Button3)`
+  width: 24px;
+  height: 24px;
 `;
 function DebouncedInput({
   value: initialValue,
   onChange,
+  icon,
   debounce = 500,
   ...props
 }) {
-  const [value, setValue] = useState2(initialValue);
+  const [value, setValue] = useState3(initialValue);
   useEffect(() => {
     setValue(initialValue);
   }, [initialValue]);
@@ -246,10 +353,27 @@ function DebouncedInput({
     }, debounce);
     return () => clearTimeout(timeout);
   }, [value]);
-  return /* @__PURE__ */ jsx7(Wrapper3, {
-    children: /* @__PURE__ */ jsx7(Input, {
+  return /* @__PURE__ */ jsx8(Wrapper3, {
+    children: /* @__PURE__ */ jsx8(Input, {
       ...props,
       value,
+      leftAdornments: icon && /* @__PURE__ */ jsx8(Icon5, {
+        name: icon.name,
+        data: icon,
+        size: 18
+      }),
+      rightAdornments: !!value && /* @__PURE__ */ jsx8(Tooltip, {
+        title: "Clear input",
+        children: /* @__PURE__ */ jsx8(CloseButton, {
+          variant: "ghost_icon",
+          onClick: () => setValue(""),
+          children: /* @__PURE__ */ jsx8(Icon5, {
+            name: close2.name,
+            data: close2,
+            size: 18
+          })
+        })
+      }),
       onChange: (event) => setValue(event.target.value)
     })
   });
@@ -266,38 +390,41 @@ var fuzzyFilter = (row, columnId, value, addMeta) => {
 };
 
 // src/DataTable/components/DataTableHeader.tsx
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
-var DataTableHeaderWrapper = styled6.div`
-  & > * + * {
-    margin-top: 0.5rem;
-  }
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+var DataTableHeaderWrapper = styled7.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   gap: 0.5rem;
   padding: ${(props) => props.captionPadding ?? "1rem"};
 `;
-var FilterContainer = styled6.div`
+var FilterContainer = styled7.div`
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 1rem;
+  justify-content: flex-end;
 `;
 var DataTableHeader = (props) => {
-  return /* @__PURE__ */ jsxs5(DataTableHeaderWrapper, {
+  const [globalFilter, setGlobalFilter] = useAtom(globalFilterAtom);
+  return /* @__PURE__ */ jsxs6(DataTableHeaderWrapper, {
     className: "--table-caption",
     captionPadding: props.captionPadding,
     children: [
-      (props == null ? void 0 : props.tableCaption) && /* @__PURE__ */ jsx8(Typography, {
-        variant: "h2",
+      (props == null ? void 0 : props.tableCaption) && /* @__PURE__ */ jsx9(Typography, {
+        variant: "h3",
         children: props == null ? void 0 : props.tableCaption
       }),
-      (props == null ? void 0 : props.enableGlobalFilter) && /* @__PURE__ */ jsx8(FilterContainer, {
+      (props == null ? void 0 : props.enableGlobalFilter) && /* @__PURE__ */ jsxs6(FilterContainer, {
         className: "--filter-container",
-        children: /* @__PURE__ */ jsx8(DebouncedInput, {
-          value: props.globalFilter ?? "",
-          placeholder: (props == null ? void 0 : props.globalFilterPlaceholder) ?? "Search all columns",
-          onChange: (value) => {
-            var _a;
-            return (_a = props.setGlobalFilter) == null ? void 0 : _a.call(props, String(value));
-          }
-        })
+        children: [
+          /* @__PURE__ */ jsx9(DebouncedInput, {
+            value: globalFilter,
+            icon: search,
+            placeholder: (props == null ? void 0 : props.globalFilterPlaceholder) ?? "Search all columns",
+            onChange: (value) => setGlobalFilter(String(value))
+          }),
+          props.filterActions
+        ]
       })
     ]
   });
@@ -306,54 +433,55 @@ var DataTableHeader = (props) => {
 // src/DataTable/components/VirtualTable.tsx
 import { Table as Table5 } from "@equinor/eds-core-react";
 import { flexRender as flexRender3 } from "@tanstack/react-table";
-import { useVirtual } from "@tanstack/react-virtual";
+import { useVirtualizer } from "@tanstack/react-virtual";
 
 // src/DataTable/components/PaddingRow.tsx
 import { Table as Table4 } from "@equinor/eds-core-react";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var PaddingRow = (props) => {
   if (!props.height)
     return null;
-  return /* @__PURE__ */ jsx9(Table4.Row, {
-    children: /* @__PURE__ */ jsx9(Table4.Cell, {
+  return /* @__PURE__ */ jsx10(Table4.Row, {
+    children: /* @__PURE__ */ jsx10(Table4.Cell, {
       style: { height: `${props.height}px` }
     })
   });
 };
 
 // src/DataTable/components/VirtualTable.tsx
-import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 function VirtualTable({ table, containerRef, ...props }) {
   var _a, _b;
   const { rows } = table.getRowModel();
-  const rowVirtualizer = useVirtual({
-    overscan: 10,
-    size: rows.length,
-    parentRef: containerRef
+  const rowVirtualizer = useVirtualizer({
+    count: rows.length,
+    estimateSize: () => 35,
+    getScrollElement: () => containerRef.current
   });
-  const { virtualItems: virtualRows, totalSize } = rowVirtualizer;
+  const virtualRows = rowVirtualizer.getVirtualItems();
   const paddingTop = virtualRows.length > 0 ? ((_a = virtualRows == null ? void 0 : virtualRows[0]) == null ? void 0 : _a.start) || 0 : 0;
-  const paddingBottom = virtualRows.length > 0 ? totalSize - (((_b = virtualRows == null ? void 0 : virtualRows[virtualRows.length - 1]) == null ? void 0 : _b.end) || 0) : 0;
-  return /* @__PURE__ */ jsxs6(Table5, {
+  const paddingBottom = virtualRows.length > 0 ? rowVirtualizer.getTotalSize() - (((_b = virtualRows == null ? void 0 : virtualRows[virtualRows.length - 1]) == null ? void 0 : _b.end) || 0) : 0;
+  return /* @__PURE__ */ jsxs7(Table5, {
     children: [
-      /* @__PURE__ */ jsx10(TableHeader, {
+      /* @__PURE__ */ jsx11(TableHeader, {
         sticky: props.stickyHeader,
         table
       }),
-      /* @__PURE__ */ jsxs6(Table5.Body, {
+      /* @__PURE__ */ jsxs7(Table5.Body, {
         children: [
-          /* @__PURE__ */ jsx10(PaddingRow, {
+          /* @__PURE__ */ jsx11(PaddingRow, {
             height: paddingTop
           }),
           virtualRows.map((virtualRow) => {
             const row = rows[virtualRow.index];
-            return /* @__PURE__ */ jsx10(Table5.Row, {
-              children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx10(Table5.Cell, {
+            return /* @__PURE__ */ jsx11(Table5.Row, {
+              active: row.getIsSelected(),
+              children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx11(Table5.Cell, {
                 children: flexRender3(cell.column.columnDef.cell, cell.getContext())
               }, cell.id))
             }, row.id);
           }),
-          /* @__PURE__ */ jsx10(PaddingRow, {
+          /* @__PURE__ */ jsx11(PaddingRow, {
             height: paddingBottom
           })
         ]
@@ -362,14 +490,42 @@ function VirtualTable({ table, containerRef, ...props }) {
   });
 }
 
-// src/DataTable/utils.ts
+// src/DataTable/utils.tsx
+import { Checkbox as Checkbox2 } from "@equinor/eds-core-react";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function enableOrUndefined(enabled, value) {
   return Boolean(enabled) ? value : void 0;
 }
+function prependSelectColumnIfEnabled(columns, config) {
+  if (!(config == null ? void 0 : config.enableRowSelection))
+    return columns;
+  const selectColumn = {
+    id: "select",
+    header: ({ table }) => /* @__PURE__ */ jsx12("div", {
+      style: { width: "48px" },
+      children: /* @__PURE__ */ jsx12(Checkbox2, {
+        checked: table.getIsAllRowsSelected(),
+        indeterminate: table.getIsSomeRowsSelected(),
+        "aria-label": table.getIsAllRowsSelected() ? "Deselect all rows" : "Select all rows",
+        onChange: table.getToggleAllRowsSelectedHandler()
+      })
+    }),
+    cell: ({ row }) => /* @__PURE__ */ jsx12("div", {
+      style: { width: "48px" },
+      children: /* @__PURE__ */ jsx12(Checkbox2, {
+        checked: row.getIsSelected(),
+        indeterminate: row.getIsSomeSelected(),
+        "aria-label": `Select ${row.getValue("name")}`,
+        onChange: row.getToggleSelectedHandler()
+      })
+    })
+  };
+  return [selectColumn, ...columns];
+}
 
 // src/DataTable/DataTable.tsx
-import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
-var DataTableWrapper = styled7.div`
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+var DataTableWrapper = styled8.div`
   width: ${(props) => props.width ?? "100%"};
 
   .--table-container {
@@ -383,48 +539,55 @@ var DataTableWrapper = styled7.div`
   }
 `;
 function DataTable({ columns, data, header, filters, config }) {
-  const [globalFilter, setGlobalFilter] = useState3("");
+  const [columnVisibility, setColumnVisibility] = useAtom2(columnVisibilityAtom);
+  const [globalFilter, setGlobalFilter] = useAtom2(globalFilterAtom);
+  const [sorting, setSorting] = useAtom2(tableSortingAtom);
+  const [rowSelectionState, setRowSelectionState] = useAtom2(rowSelectionAtom);
   function enableGlobalFilter(value) {
     return enableOrUndefined(filters == null ? void 0 : filters.globalFilter, value);
   }
-  const [sorting, setSorting] = useState3([]);
   const table = useReactTable({
-    columns,
+    columns: prependSelectColumnIfEnabled(columns, config),
     data,
     getCoreRowModel: getCoreRowModel(),
     getFilteredRowModel: enableGlobalFilter(getFilteredRowModel()),
     globalFilterFn: enableGlobalFilter(fuzzyFilter),
     state: {
       globalFilter: enableGlobalFilter(globalFilter),
-      sorting
+      sorting: enableOrUndefined(config == null ? void 0 : config.sortable, sorting),
+      rowSelection: rowSelectionState,
+      columnVisibility
     },
+    onRowSelectionChange: setRowSelectionState,
     enableSorting: config == null ? void 0 : config.sortable,
-    onSortingChange: setSorting,
+    onSortingChange: enableOrUndefined(config == null ? void 0 : config.sortable, setSorting),
     getSortedRowModel: getSortedRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
     onGlobalFilterChange: enableGlobalFilter(setGlobalFilter)
   });
-  const tableContainerRef = useRef(null);
-  return /* @__PURE__ */ jsxs7(DataTableWrapper, {
+  const tableContainerRef = useRef2(null);
+  return /* @__PURE__ */ jsxs8(DataTableWrapper, {
     captionPadding: header == null ? void 0 : header.captionPadding,
     height: config == null ? void 0 : config.height,
     width: config == null ? void 0 : config.width,
     children: [
-      /* @__PURE__ */ jsx11(DataTableHeader, {
+      /* @__PURE__ */ jsx13(DataTableHeader, {
         tableCaption: header == null ? void 0 : header.tableCaption,
         enableGlobalFilter: filters == null ? void 0 : filters.globalFilter,
-        globalFilter,
-        setGlobalFilter,
         globalFilterPlaceholder: filters == null ? void 0 : filters.globalFilterPlaceholder,
-        captionPadding: header == null ? void 0 : header.captionPadding
+        captionPadding: header == null ? void 0 : header.captionPadding,
+        filterActions: /* @__PURE__ */ jsx13(ColumnSelect, {
+          table
+        })
       }),
-      /* @__PURE__ */ jsx11("div", {
+      /* @__PURE__ */ jsx13("div", {
         ref: tableContainerRef,
         className: "--table-container",
-        children: (config == null ? void 0 : config.virtual) ? /* @__PURE__ */ jsx11(VirtualTable, {
+        children: (config == null ? void 0 : config.virtual) ? /* @__PURE__ */ jsx13(VirtualTable, {
           containerRef: tableContainerRef,
           table,
           stickyHeader: header == null ? void 0 : header.stickyHeader
-        }) : /* @__PURE__ */ jsx11(BasicTable, {
+        }) : /* @__PURE__ */ jsx13(BasicTable, {
           table,
           stickyHeader: header == null ? void 0 : header.stickyHeader
         })
@@ -432,9 +595,26 @@ function DataTable({ columns, data, header, filters, config }) {
     ]
   });
 }
+
+// src/DataTable/Provider.tsx
+import { Provider } from "jotai";
+import { jsx as jsx14 } from "react/jsx-runtime";
+function DataTableProvider({ children, ...props }) {
+  return /* @__PURE__ */ jsx14(Provider, {
+    ...props,
+    children
+  });
+}
+
+// src/DataTable/index.ts
+var DataTable2 = DataTable;
+DataTable2.Provider = DataTableProvider;
 export {
   AppShell,
   AppSidebar,
   ChipsCell,
-  DataTable
+  DataTable2 as DataTable,
+  globalFilterAtom,
+  rowSelectionAtom,
+  tableSortingAtom
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/apollo-components",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "license": "MIT",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -17,12 +17,13 @@
     "storybook": "storybook dev"
   },
   "dependencies": {
-    "@equinor/eds-core-react": "^0.24.0",
+    "@equinor/eds-core-react": "^0.27.0",
     "@equinor/eds-icons": "^0.15.0",
     "@equinor/eds-tokens": "^0.9.0",
     "@tanstack/match-sorter-utils": "^8.5.14",
     "@tanstack/react-table": "^8.5.15",
     "@tanstack/react-virtual": "^3.0.0-beta.23",
+    "jotai": "^1.10.0",
     "styled-components": "^5.3.6",
     "tsup": "^6.3.0"
   },