From c5ff0245130bd942f5a77592ccf7b896b044aae8 Mon Sep 17 00:00:00 2001
From: Samuel Gratzl <sam@sgratzl.com>
Date: Tue, 25 May 2021 11:24:30 -0400
Subject: [PATCH] feat: improve custom filter/sortby/groupby actions

---
 packages/_playground/src/App.tsx              | 213 ++++++++++++------
 packages/_playground/src/styles.css           |  16 +-
 packages/hooks/src/grouping/baseGroupBy.ts    |  22 +-
 .../src/grouping/columnSpecificGroupByFn.ts   |   6 +-
 packages/hooks/src/grouping/histGroupBy.ts    |   2 +-
 packages/hooks/src/grouping/textGroupBy.ts    |  10 +-
 .../hooks/src/hooks/useGroupingOptions.ts     |   2 +-
 packages/hooks/src/hooks/useSortingOptions.ts |   2 +-
 packages/table/src/components/LineUpLite.tsx  |   9 +-
 .../table/src/components/LineUpLiteTH.tsx     |  11 +-
 .../table/src/components/LineUpLiteTHead.tsx  |  12 +-
 packages/table/src/components/interfaces.ts   |  18 +-
 .../toolbar/LineUpLiteFilterAction.tsx        |  52 +++--
 .../toolbar/LineUpLiteGroupByAction.tsx       |  54 +++--
 .../toolbar/LineUpLiteHideAction.tsx          |  35 +--
 .../toolbar/LineUpLiteSortByAction.tsx        |  63 +++---
 .../components/toolbar/LineUpLiteToolbar.tsx  |  43 +++-
 .../table/src/components/useLineUpLite.ts     |   8 +-
 18 files changed, 395 insertions(+), 183 deletions(-)

diff --git a/packages/_playground/src/App.tsx b/packages/_playground/src/App.tsx
index 34f1468..c3b596a 100644
--- a/packages/_playground/src/App.tsx
+++ b/packages/_playground/src/App.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
 /**
  * @lineup-lite/example-basic
  * https://github.com/sgratzl/lineup-lite
@@ -10,23 +11,23 @@ import '@lineup-lite/components/src/style.css';
 import '@lineup-lite/hooks/src/style.css';
 import LineUpLite, {
   actionIconsRemixicon,
-  asTextColumn,
+  ActionLineUpProps,
   asDivergingNumberColumn,
+  asTextColumn,
+  featureFilterColumns,
+  featureFlexLayout,
+  featureRowRank,
+  featureRowSelect,
+  featureSortAndGroupBy,
   LineUpLiteColumn,
   LineUpLitePanel,
   LineUpLiteStateContextProvider,
-  ColumnInstance,
-  LineUpLiteFilterAction,
   UseFiltersColumnProps,
-  featureFlexLayout,
-  featureFilterColumns,
-  featureRowRank,
-  featureSortAndGroupBy,
-  featureRowSelect,
-  ActionIcons,
+  ColumnInstance,
 } from '@lineup-lite/table';
+import type { TextGroupByOptions } from '@lineup-lite/hooks';
 import '@lineup-lite/table/src/style.css';
-import React, { useMemo, useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { data, Row } from './data';
 import './styles.css';
 
@@ -35,59 +36,138 @@ function MyCheckBox({ indeterminate, ...rest }: any) {
   return <input type="checkbox" {...rest} style={{ color: 'blue' }} />;
 }
 
-function MyFilterAction(props: { col: ColumnInstance<Row>; icons: ActionIcons }) {
-  const col = props.col as unknown as ColumnInstance<Row> & UseFiltersColumnProps<Row>;
+function useVisibleHelper() {
+  const [visible, setVisible] = useState([] as string[]);
 
-  const [visible, setVisible] = useState(false);
-  const showFilterDialog = useCallback(() => {
-    setVisible(!visible);
-  }, [visible, setVisible]);
+  const toggleVisibility = useCallback(
+    (col: { id: string }) => {
+      setVisible((v) => (v.indexOf(col.id) >= 0 ? v.filter((d) => d !== col.id) : [...v, col.id]));
+    },
+    [setVisible]
+  );
+  const isVisible = useCallback((col: { id: string }) => visible.indexOf(col.id) >= 0, [visible]);
+  return { toggleVisibility, isVisible };
+}
 
-  return (
-    <>
-      <LineUpLiteFilterAction
-        column={col}
-        iconFilter={props.icons.filterColumn}
-        toggleFilterColumn={showFilterDialog}
-      />
-      {visible && (
-        <div className="filter-dialog">
-          {col.render('Summary')}
-          <button onClick={showFilterDialog} type="button">
-            Close
-          </button>
-        </div>
-      )}
-    </>
+function useFilterAction() {
+  const { toggleVisibility, isVisible } = useVisibleHelper();
+  const r: ActionLineUpProps<Row>['actionFilter'] = useCallback(
+    (col: ColumnInstance<Row> & UseFiltersColumnProps<Row>) => {
+      if (!col.canFilter) {
+        return undefined;
+      }
+      const handler = () => toggleVisibility(col);
+      return {
+        handler,
+        children: isVisible(col) ? (
+          <div className="filter-dialog">
+            {col.render('Summary')}
+            <button onClick={handler} type="button">
+              Close
+            </button>
+          </div>
+        ) : undefined,
+      };
+    },
+    [isVisible, toggleVisibility]
   );
+  return r;
 }
 
-// function MyGroupingOptionAction(props: { col: ColumnInstance<Row>; icons: ActionIcons }) {
-//   const col = props.col as unknown as ColumnInstance<Row> & UseFiltersColumnProps<Row>;
+function TextGroupByOptionsBlock({
+  setGroupingOptions,
+  groupingOptions,
+  onClose,
+}: {
+  groupingOptions?: TextGroupByOptions;
+  setGroupingOptions(v: TextGroupByOptions | undefined): void;
+  onClose(): void;
+}) {
+  const values = (groupingOptions?.values ?? []) as (RegExp | string)[];
+
+  const onSubmit = useCallback(
+    (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      const fData = new FormData(e.currentTarget);
+      const type = fData.get('type') as TextGroupByOptions['type'];
+      if (!type) {
+        setGroupingOptions(undefined);
+        onClose();
+        return;
+      }
+
+      const currentValues = (fData.get('values') ?? '')
+        .toString()
+        .split('\n')
+        .map((d) => d.trim())
+        .filter(Boolean);
+      if (type === 'regex') {
+        setGroupingOptions({
+          type,
+          values: currentValues.map((d) => new RegExp(d)),
+        });
+      } else {
+        setGroupingOptions({
+          type,
+          values: currentValues,
+        });
+      }
+      onClose();
+    },
+    [onClose, setGroupingOptions]
+  );
 
-//   const [visible, setVisible] = useState(false);
-//   const showGroupingDialog = useCallback(() => {
-//     setVisible(!visible);
-//   }, [visible, setVisible]);
+  return (
+    <form className="groupby-dialog" onSubmit={onSubmit}>
+      <label>
+        <input type="radio" name="type" value="value" defaultChecked={groupingOptions?.type === 'value'} />
+        By Value
+      </label>
+      <label>
+        <input type="radio" name="type" value="regex" defaultChecked={groupingOptions?.type === 'regex'} />
+        By Regex
+      </label>
+      <label>
+        <input type="radio" name="type" value="startsWith" defaultChecked={groupingOptions?.type === 'startsWith'} />
+        By Starts With
+      </label>
+      <textarea
+        required
+        name="values"
+        defaultValue={values.map((d) => (d instanceof RegExp ? d.source : d)).join('\n')}
+        rows={5}
+        style={{ height: '5em' }}
+      />
+      <button type="submit">Close</button>
+    </form>
+  );
+}
 
-//   return (
-//     <>
-//       <LineUpLiteFilterAction
-//         column={col}
-//         iconFilter={props.icons.filterColumn}
-//         toggleFilterColumn={showGroupingDialog}
-//       />
-//       {visible && (
-//         <div className="filter-dialog">
-//           {col.render('Summary')}
-//           <button onClick={showGroupingDialog} type="button">
-//             Close
-//           </button>
-//         </div>
-//       )}
-//     </>
-//   );
-// }
+function useGroupByAction() {
+  const { toggleVisibility, isVisible } = useVisibleHelper();
+  return useMemo(() => {
+    const f: ActionLineUpProps<Row>['actionGroupBy'] = (col, helper) => {
+      if (!col.canGroupBy || !col.setGroupingOptions || col.id !== 'name' || col.isGrouped) {
+        return undefined;
+      }
+      const handler = () => toggleVisibility(col);
+      return {
+        handler,
+        children: isVisible(col) ? (
+          <TextGroupByOptionsBlock
+            groupingOptions={col.groupingOptions}
+            setGroupingOptions={col.setGroupingOptions}
+            onClose={() => {
+              helper.toggleGroupBy();
+              handler();
+            }}
+          />
+        ) : undefined,
+      };
+    };
+    return f;
+  }, [isVisible, toggleVisibility]);
+}
 
 function Table({ isDarkTheme }: { isDarkTheme: boolean }) {
   const columns: LineUpLiteColumn<Row>[] = useMemo(
@@ -114,13 +194,8 @@ function Table({ isDarkTheme }: { isDarkTheme: boolean }) {
   );
   const icons = useMemo(() => actionIconsRemixicon(), []);
 
-  const filterAction = useCallback((col: ColumnInstance<Row>, givenIcons: ActionIcons) => {
-    return (
-      <>
-        <MyFilterAction col={col} icons={givenIcons} />
-      </>
-    );
-  }, []);
+  const actionFilter = useFilterAction();
+  const actionGroupBy = useGroupByAction();
 
   return (
     <LineUpLiteStateContextProvider>
@@ -133,11 +208,17 @@ function Table({ isDarkTheme }: { isDarkTheme: boolean }) {
             icons={icons}
             dark={isDarkTheme}
             selectCheckboxComponent={MyCheckBox}
-            actions={filterAction}
-            // onStateChange={setInstance}
+            actionFilter={actionFilter}
+            actionGroupBy={actionGroupBy}
           />
         </div>
-        <LineUpLitePanel className="side-panel" icons={icons} dark={isDarkTheme} actions={filterAction} />
+        <LineUpLitePanel
+          className="side-panel"
+          icons={icons}
+          dark={isDarkTheme}
+          actionFilter={actionFilter}
+          actionGroupBy={actionGroupBy}
+        />
       </div>
     </LineUpLiteStateContextProvider>
   );
diff --git a/packages/_playground/src/styles.css b/packages/_playground/src/styles.css
index f3e36d3..65a7ed7 100644
--- a/packages/_playground/src/styles.css
+++ b/packages/_playground/src/styles.css
@@ -21,7 +21,7 @@ code {
 
 @media (prefers-color-scheme: dark) {
   body {
-    background:  #333; color: white; 
+    background:  #333; color: white;
   }
 }
 
@@ -68,3 +68,17 @@ code {
   margin-top: 0.5em;
   flex-grow: 1;
 }
+
+
+.groupby-dialog {
+  position: absolute;
+  width: 12em;
+  background: rgba(255, 255, 255, 0.95);
+  border: 1px solid currentColor;
+  border-radius: 3px;
+  z-index: 100;
+  top: 100%;
+  right: 0;
+  display: flex;
+  flex-direction: column
+}
diff --git a/packages/hooks/src/grouping/baseGroupBy.ts b/packages/hooks/src/grouping/baseGroupBy.ts
index d849287..42f6bc2 100644
--- a/packages/hooks/src/grouping/baseGroupBy.ts
+++ b/packages/hooks/src/grouping/baseGroupBy.ts
@@ -8,14 +8,24 @@
 import type { ColumnInstance, Row } from 'react-table';
 import type { AnyObject, UnknownObject } from '../interfaces';
 import { compareAsc } from '../sort/internal';
-import { MISSING_GROUP } from './histGroupBy';
+import { MISSING_GROUP, OTHERS_GROUPS } from './histGroupBy';
 
-export function compareMissing(a: string, b: string): number {
-  if (a === MISSING_GROUP) {
-    return b === MISSING_GROUP ? 0 : 1;
+function toSpecialIndex(v: string) {
+  if (v === MISSING_GROUP) {
+    return 2;
+  }
+  if (v === OTHERS_GROUPS) {
+    return 1;
   }
-  if (b === MISSING_GROUP) {
-    return -1;
+  return 0;
+}
+
+export function compareMissing(a: string, b: string): number {
+  const aIndex = toSpecialIndex(a);
+  const bIndex = toSpecialIndex(b);
+
+  if (aIndex !== bIndex) {
+    return aIndex - bIndex;
   }
   return compareAsc(a, b);
 }
diff --git a/packages/hooks/src/grouping/columnSpecificGroupByFn.ts b/packages/hooks/src/grouping/columnSpecificGroupByFn.ts
index c6c8502..f0227be 100644
--- a/packages/hooks/src/grouping/columnSpecificGroupByFn.ts
+++ b/packages/hooks/src/grouping/columnSpecificGroupByFn.ts
@@ -32,7 +32,11 @@ export default function columnSpecificGroupByFn<D extends AnyObject = UnknownObj
   }
   const cell: Cell<D, AnyObject> | undefined = rows[0].allCells.find((d) => d.column.id === columnId);
   if (hasGroupByFunction<D>(cell)) {
-    return cell.column.groupBy(rows, cell.column, (cell as Partial<UseGroupingOptionsColumnProps>).groupingOptions);
+    return cell.column.groupBy(
+      rows,
+      cell.column,
+      (cell.column as Partial<UseGroupingOptionsColumnProps>).groupingOptions
+    );
   }
   return defaultGroupByFn(rows, columnId);
 }
diff --git a/packages/hooks/src/grouping/histGroupBy.ts b/packages/hooks/src/grouping/histGroupBy.ts
index 44b70a5..19f0cb3 100644
--- a/packages/hooks/src/grouping/histGroupBy.ts
+++ b/packages/hooks/src/grouping/histGroupBy.ts
@@ -12,7 +12,7 @@ import type { AnyObject, UnknownObject } from '../interfaces';
 import { computeArrayNumberStats } from '../stats';
 
 export const MISSING_GROUP = 'Missing Values';
-
+export const OTHERS_GROUPS = 'Other Values';
 /**
  * group by histogram
  * @param rows
diff --git a/packages/hooks/src/grouping/textGroupBy.ts b/packages/hooks/src/grouping/textGroupBy.ts
index 17c5057..560408a 100644
--- a/packages/hooks/src/grouping/textGroupBy.ts
+++ b/packages/hooks/src/grouping/textGroupBy.ts
@@ -8,7 +8,7 @@
 import type { ColumnInstance, Row } from 'react-table';
 import type { AnyObject, UnknownObject } from '../interfaces';
 import baseGroupBy, { sortGroups } from './baseGroupBy';
-import { MISSING_GROUP } from './histGroupBy';
+import { MISSING_GROUP, OTHERS_GROUPS } from './histGroupBy';
 
 export interface TextGroupByValueOptions {
   type: 'value';
@@ -38,19 +38,19 @@ export default function textGroupBy<D extends AnyObject = UnknownObject>(
   let toGroup = (v: string | null) => v || MISSING_GROUP;
   switch (options.type) {
     case 'regex':
-      toGroup = (v) => options.values.find((d) => v != null && d.test(v))?.source ?? MISSING_GROUP;
+      toGroup = (v) => options.values.find((d) => v != null && d.test(v))?.source ?? OTHERS_GROUPS;
       break;
     case 'value':
-      toGroup = (v) => options.values.find((d) => v != null && d === v) ?? MISSING_GROUP;
+      toGroup = (v) => options.values.find((d) => v != null && d === v) ?? OTHERS_GROUPS;
       break;
     case 'startsWith':
-      toGroup = (v) => options.values.find((d) => v != null && v.startsWith(d)) ?? MISSING_GROUP;
+      toGroup = (v) => options.values.find((d) => v != null && v.startsWith(d)) ?? OTHERS_GROUPS;
       break;
   }
 
   for (const row of rows) {
     const v = row.values[column.id] ?? null;
-    const g = toGroup(v);
+    const g = v != null ? toGroup(v) : MISSING_GROUP;
     const rValue = r[g];
     if (!rValue) {
       r[g] = [row];
diff --git a/packages/hooks/src/hooks/useGroupingOptions.ts b/packages/hooks/src/hooks/useGroupingOptions.ts
index 291ffcf..5555930 100644
--- a/packages/hooks/src/hooks/useGroupingOptions.ts
+++ b/packages/hooks/src/hooks/useGroupingOptions.ts
@@ -86,7 +86,7 @@ function reducer<D extends AnyObject = UnknownObject>(
     };
   }
 
-  if (action.type === actions.setRowState) {
+  if (action.type === actions.setGroupingOptions) {
     const { columnId, groupingOptions } = action as unknown as {
       columnId: string;
       groupingOptions: Record<string, unknown>;
diff --git a/packages/hooks/src/hooks/useSortingOptions.ts b/packages/hooks/src/hooks/useSortingOptions.ts
index 97966d1..8a55e16 100644
--- a/packages/hooks/src/hooks/useSortingOptions.ts
+++ b/packages/hooks/src/hooks/useSortingOptions.ts
@@ -59,7 +59,7 @@ function reducer<D extends AnyObject = UnknownObject>(
     };
   }
 
-  if (action.type === actions.setRowState) {
+  if (action.type === actions.setSortingOptions) {
     const { columnId, sortingOptions } = action as unknown as {
       columnId: string;
       sortingOptions: Record<string, unknown>;
diff --git a/packages/table/src/components/LineUpLite.tsx b/packages/table/src/components/LineUpLite.tsx
index 7ead693..626b2af 100644
--- a/packages/table/src/components/LineUpLite.tsx
+++ b/packages/table/src/components/LineUpLite.tsx
@@ -31,7 +31,14 @@ export const LineUpLite = /*! #__PURE__ */ forwardRef(function LineUpLite<D exte
       ref={ref}
     >
       <LineUpLiteTableContextProvider instance={instance} props={props}>
-        <LineUpLiteTHead headerGroups={headerGroups} actions={props.actions} icons={props.icons} />
+        <LineUpLiteTHead
+          headerGroups={headerGroups}
+          actions={props.actions}
+          actionFilter={props.actionFilter}
+          actionGroupBy={props.actionGroupBy}
+          actionSortBy={props.actionSortBy}
+          icons={props.icons}
+        />
         <p.b
           {...getTableBodyProps({
             className: clsx('lt-tbody', props.classNames?.tbody),
diff --git a/packages/table/src/components/LineUpLiteTH.tsx b/packages/table/src/components/LineUpLiteTH.tsx
index 8c45fed..ba5034f 100644
--- a/packages/table/src/components/LineUpLiteTH.tsx
+++ b/packages/table/src/components/LineUpLiteTH.tsx
@@ -19,7 +19,7 @@ export interface LineUpLiteTHProps<D extends AnyObject = UnknownObject> extends
 }
 
 const LineUpLiteTHImpl = /*! #__PURE__ */ forwardRef(function LineUpLiteTH<D extends AnyObject = UnknownObject>(
-  { col, actions, icons, children }: LineUpLiteTHProps<D>,
+  { col, actions, icons, children, actionFilter, actionGroupBy, actionSortBy }: LineUpLiteTHProps<D>,
   ref: Ref<HTMLElement>
 ) {
   const column = col as unknown as HeaderGroup<D> &
@@ -53,7 +53,14 @@ const LineUpLiteTHImpl = /*! #__PURE__ */ forwardRef(function LineUpLiteTH<D ext
       <div className={clsx('lt-header', c?.classNames?.header)} style={c?.styles?.header} title={column.tooltip}>
         {column.render('Header')}
       </div>
-      <LineUpLiteToolbar {...col} icons={icons} actions={actions} />
+      <LineUpLiteToolbar
+        {...col}
+        icons={icons}
+        actions={actions}
+        actionFilter={actionFilter}
+        actionGroupBy={actionGroupBy}
+        actionSortBy={actionSortBy}
+      />
       {column.Summary && column.render('Summary')}
       {children}
     </p.c>
diff --git a/packages/table/src/components/LineUpLiteTHead.tsx b/packages/table/src/components/LineUpLiteTHead.tsx
index 2514395..0847c34 100644
--- a/packages/table/src/components/LineUpLiteTHead.tsx
+++ b/packages/table/src/components/LineUpLiteTHead.tsx
@@ -18,7 +18,7 @@ export interface LineUpLiteTHeadProps<D extends AnyObject = UnknownObject> exten
 }
 
 const LineUpLiteTHeadImpl = /*! #__PURE__ */ forwardRef(function LineUpLiteTHead<D extends AnyObject = UnknownObject>(
-  { headerGroups, icons, actions, children }: LineUpLiteTHeadProps<D>,
+  { headerGroups, icons, actions, actionFilter, actionGroupBy, actionSortBy, children }: LineUpLiteTHeadProps<D>,
   ref: Ref<HTMLElement>
 ) {
   const c = useLineUpLiteTableContext();
@@ -39,7 +39,15 @@ const LineUpLiteTHeadImpl = /*! #__PURE__ */ forwardRef(function LineUpLiteTHead
           {headerGroup.headers
             .filter((d) => d.isVisible)
             .map((col) => (
-              <LineUpLiteTH key={col.id} col={col} actions={actions} icons={icons} />
+              <LineUpLiteTH
+                key={col.id}
+                col={col}
+                actions={actions}
+                actionFilter={actionFilter}
+                actionGroupBy={actionGroupBy}
+                actionSortBy={actionSortBy}
+                icons={icons}
+              />
             ))}
         </p.g>
       ))}
diff --git a/packages/table/src/components/interfaces.ts b/packages/table/src/components/interfaces.ts
index f46203e..37eeb82 100644
--- a/packages/table/src/components/interfaces.ts
+++ b/packages/table/src/components/interfaces.ts
@@ -5,17 +5,17 @@
  * Copyright (c) 2021 Samuel Gratzl <sam@sgratzl.com>
  */
 
-import type { ColumnInstance } from 'react-table';
-import type { ComponentType, CSSProperties, DetailedHTMLProps, HTMLAttributes, ReactNode } from 'react';
 import type { CommonProps } from '@lineup-lite/components';
 import type { AnyObject, UnknownObject } from '@lineup-lite/hooks';
-import type { ActionIcons } from '../icons';
+import type { ComponentType, CSSProperties, DetailedHTMLProps, HTMLAttributes, ReactNode } from 'react';
+import type { ColumnInstance } from 'react-table';
 import type { LineUpLiteI18N } from '../i18n';
+import type { ActionIcons } from '../icons';
+import type { CustomFilterByAction, CustomGroupByAction, CustomSortByAction } from './toolbar';
 import type { UseLineUpLiteOptions } from './useLineUpLite';
-import type { CustomGroupByClickHandler, CustomSortByClickHandler } from './toolbar';
 
-export type { ColumnInstance, HeaderGroup, Row, Column } from 'react-table';
 export type { AnyObject, UnknownObject } from '@lineup-lite/hooks';
+export type { Column, ColumnInstance, HeaderGroup, Row } from 'react-table';
 
 export type MultiCustomizeKeys = 'tbody' | 'tr' | 'thead' | 'th' | 'thGroup' | 'td' | 'header';
 
@@ -52,11 +52,15 @@ export interface ActionLineUpProps<D extends AnyObject = UnknownObject> {
   /**
    * custom handler for sort by action click
    */
-  actionSortBy?: CustomSortByClickHandler<D>;
+  actionSortBy?: CustomSortByAction<D>;
   /**
    * custom handler for group by action click
    */
-  actionGroupBy?: CustomGroupByClickHandler<D>;
+  actionGroupBy?: CustomGroupByAction<D>;
+  /**
+   * custom handler for filter action click
+   */
+  actionFilter?: CustomFilterByAction<D>;
 }
 
 export interface LineUpLiteProps<D extends AnyObject = UnknownObject>
diff --git a/packages/table/src/components/toolbar/LineUpLiteFilterAction.tsx b/packages/table/src/components/toolbar/LineUpLiteFilterAction.tsx
index 168a39b..971de7f 100644
--- a/packages/table/src/components/toolbar/LineUpLiteFilterAction.tsx
+++ b/packages/table/src/components/toolbar/LineUpLiteFilterAction.tsx
@@ -5,8 +5,8 @@
  * Copyright (c) 2021 Samuel Gratzl <sam@sgratzl.com>
  */
 
-import React, { ComponentType, useCallback, MouseEvent, ReactNode } from 'react';
-import type { UseFiltersColumnProps } from 'react-table';
+import React, { ComponentType, MouseEvent, ReactNode } from 'react';
+import type { ColumnInstance, UseFiltersColumnProps } from 'react-table';
 import type { CommonProps } from '@lineup-lite/components';
 import { LINEUP_LITE_I18N_EN } from '../../i18n';
 import { useLineUpLiteTableContext } from '../contexts';
@@ -15,32 +15,44 @@ import type { AnyObject, UnknownObject } from '../interfaces';
 
 export type { UseFiltersColumnProps } from 'react-table';
 
+export interface CustomFilterByAction<D extends AnyObject = UnknownObject> {
+  (column: ColumnInstance<D> & UseFiltersColumnProps<D>):
+    | {
+        handler(event: MouseEvent<HTMLElement>): void;
+        children?: ReactNode;
+      }
+    | undefined;
+}
+
 export function LineUpLiteFilterAction<D extends AnyObject = UnknownObject>(
   props: CommonProps & {
-    column: UseFiltersColumnProps<D>;
+    column: ColumnInstance<D> & UseFiltersColumnProps<D>;
     children?: ReactNode;
+    outerChildren?: ReactNode;
     // eslint-disable-next-line react/no-unused-prop-types
-    iconFilter: ComponentType;
-    toggleFilterColumn: (e: MouseEvent<HTMLElement>) => void;
+    icon: ComponentType;
+    onClick?(event: MouseEvent<HTMLElement>): void;
   }
 ): JSX.Element {
-  const { toggleFilterColumn } = props;
-  const { canFilter, filterValue } = props.column;
+  const { onClick, column } = props;
+  const { canFilter, filterValue } = column;
   const c = useLineUpLiteTableContext();
   const i18n = c?.i18n ?? LINEUP_LITE_I18N_EN;
-  const filter = useCallback((e: MouseEvent<HTMLElement>) => toggleFilterColumn(e), [toggleFilterColumn]);
-  return canFilter ? (
-    <button
-      className={clsx('lt-action', 'lt-action-sort', filterValue != null && 'lt-action-active', props.className)}
-      style={props.style}
-      type="button"
-      title={i18n.filterColumn}
-      onClick={filter}
-    >
-      <props.iconFilter />
-      {props.children}
-    </button>
+  return canFilter && onClick != null ? (
+    <>
+      <button
+        className={clsx('lt-action', 'lt-action-sort', filterValue != null && 'lt-action-active', props.className)}
+        style={props.style}
+        type="button"
+        title={i18n.filterColumn}
+        onClick={onClick}
+      >
+        <props.icon />
+        {props.children}
+      </button>
+      {props.outerChildren}
+    </>
   ) : (
-    <></>
+    <>{props.outerChildren}</>
   );
 }
diff --git a/packages/table/src/components/toolbar/LineUpLiteGroupByAction.tsx b/packages/table/src/components/toolbar/LineUpLiteGroupByAction.tsx
index c7cc9d7..7f5ccfb 100644
--- a/packages/table/src/components/toolbar/LineUpLiteGroupByAction.tsx
+++ b/packages/table/src/components/toolbar/LineUpLiteGroupByAction.tsx
@@ -8,6 +8,7 @@
 import React, { ComponentType, useCallback, MouseEvent, ReactNode } from 'react';
 import type { ColumnInstance, UseGroupByColumnProps } from 'react-table';
 import type { CommonProps } from '@lineup-lite/components';
+import type { UseGroupingOptionsColumnProps } from '@lineup-lite/hooks';
 import { LINEUP_LITE_I18N_EN } from '../../i18n';
 import { useLineUpLiteTableContext } from '../contexts';
 import { clsx } from '../utils';
@@ -15,23 +16,28 @@ import type { AnyObject, UnknownObject } from '../interfaces';
 
 export type { UseGroupByColumnProps } from 'react-table';
 
-export interface CustomGroupByClickHandler<D extends AnyObject = UnknownObject> {
+export interface CustomGroupByAction<D extends AnyObject = UnknownObject> {
   (
-    column: ColumnInstance<D> & UseGroupByColumnProps<D>,
-    event: MouseEvent<HTMLElement>,
+    column: ColumnInstance<D> & UseGroupByColumnProps<D> & UseGroupingOptionsColumnProps,
     helper: {
       toggleGroupBy(): void;
       setGroupBy(): void;
     }
-  ): void;
+  ):
+    | {
+        handler(event: MouseEvent<HTMLElement>): void;
+        children?: ReactNode;
+      }
+    | undefined;
 }
 
 export function LineUpLiteGroupByAction<D extends AnyObject = UnknownObject>(
   props: CommonProps & {
     column: UseGroupByColumnProps<D> & ColumnInstance<D>;
     children?: ReactNode;
+    outerChildren?: ReactNode;
     icon: ComponentType;
-    onClick?: CustomGroupByClickHandler<D>;
+    onClick?(event: MouseEvent<HTMLElement>): void;
   }
 ): JSX.Element {
   const c = useLineUpLiteTableContext();
@@ -41,10 +47,7 @@ export function LineUpLiteGroupByAction<D extends AnyObject = UnknownObject>(
   const group = useCallback(
     (e: MouseEvent<HTMLElement>) => {
       if (onClick) {
-        onClick(column, e, {
-          toggleGroupBy,
-          setGroupBy: () => dispatch?.({ type: 'setGroupBy', value: [id] }),
-        });
+        onClick(e);
         return;
       }
       if (e.shiftKey || e.ctrlKey || isGrouped || !dispatch) {
@@ -55,26 +58,29 @@ export function LineUpLiteGroupByAction<D extends AnyObject = UnknownObject>(
         dispatch({ type: 'setGroupBy', value: [id] });
       }
     },
-    [toggleGroupBy, dispatch, isGrouped, id, onClick, column]
+    [toggleGroupBy, dispatch, isGrouped, id, onClick]
   );
   const i18n = c?.i18n ?? LINEUP_LITE_I18N_EN;
   const groupBys = c?.groupByColumnCount ?? 0;
   const title = isGrouped ? i18n.groupByRemoveColumn : groupBys > 0 ? i18n.groupByAnotherColumn : i18n.groupByColumn;
   return canGroupBy ? (
-    <button
-      {...props.column.getGroupByToggleProps({
-        className: clsx('lt-action', 'lt-action-group', isGrouped && 'lt-action-active', props.className),
-        style: props.style,
-      })}
-      onClick={group}
-      type="button"
-      data-index={isGrouped && groupBys > 1 ? props.column.groupedIndex + 1 : null}
-      title={title}
-    >
-      <props.icon />
-      {props.children}
-    </button>
+    <>
+      <button
+        {...props.column.getGroupByToggleProps({
+          className: clsx('lt-action', 'lt-action-group', isGrouped && 'lt-action-active', props.className),
+          style: props.style,
+        })}
+        onClick={group}
+        type="button"
+        data-index={isGrouped && groupBys > 1 ? props.column.groupedIndex + 1 : null}
+        title={title}
+      >
+        <props.icon />
+        {props.children}
+      </button>
+      {props.outerChildren}
+    </>
   ) : (
-    <></>
+    <>{props.outerChildren}</>
   );
 }
diff --git a/packages/table/src/components/toolbar/LineUpLiteHideAction.tsx b/packages/table/src/components/toolbar/LineUpLiteHideAction.tsx
index 1046514..918b23e 100644
--- a/packages/table/src/components/toolbar/LineUpLiteHideAction.tsx
+++ b/packages/table/src/components/toolbar/LineUpLiteHideAction.tsx
@@ -17,6 +17,7 @@ export default function LineUpLiteHideAction<D extends AnyObject = UnknownObject
   props: CommonProps & {
     column: ColumnInstance<D>;
     children?: ReactNode;
+    outerChildren?: ReactNode;
     canHide?: boolean;
     canResize?: boolean;
     icon: ComponentType;
@@ -27,19 +28,27 @@ export default function LineUpLiteHideAction<D extends AnyObject = UnknownObject
   const { toggleHidden } = props.column;
   const hide = useCallback(() => toggleHidden(true), [toggleHidden]);
   return props.canResize && props.canHide !== false ? (
-    <button
-      {...props.column.getToggleHiddenProps({
-        className: clsx('lt-action', 'lt-action-hide', !props.column.isVisible && 'lt-action-active', props.className),
-        style: props.style,
-      })}
-      type="button"
-      onClick={hide}
-      title={i18n.hideColumn}
-    >
-      <props.icon />
-      {props.children}
-    </button>
+    <>
+      <button
+        {...props.column.getToggleHiddenProps({
+          className: clsx(
+            'lt-action',
+            'lt-action-hide',
+            !props.column.isVisible && 'lt-action-active',
+            props.className
+          ),
+          style: props.style,
+        })}
+        type="button"
+        onClick={hide}
+        title={i18n.hideColumn}
+      >
+        <props.icon />
+        {props.children}
+      </button>
+      {props.outerChildren}
+    </>
   ) : (
-    <></>
+    <>{props.outerChildren}</>
   );
 }
diff --git a/packages/table/src/components/toolbar/LineUpLiteSortByAction.tsx b/packages/table/src/components/toolbar/LineUpLiteSortByAction.tsx
index bc8a9d2..c735712 100644
--- a/packages/table/src/components/toolbar/LineUpLiteSortByAction.tsx
+++ b/packages/table/src/components/toolbar/LineUpLiteSortByAction.tsx
@@ -8,6 +8,7 @@
 import React, { ComponentType, useCallback, MouseEvent, ReactNode } from 'react';
 import type { ColumnInstance, UseSortByColumnProps } from 'react-table';
 import type { CommonProps } from '@lineup-lite/components';
+import type { UseSortingOptionsColumnProps } from '@lineup-lite/hooks';
 import { LINEUP_LITE_I18N_EN } from '../../i18n';
 import { useLineUpLiteTableContext } from '../contexts';
 import { clsx } from '../utils';
@@ -15,31 +16,36 @@ import type { AnyObject, UnknownObject } from '../interfaces';
 
 export type { UseSortByColumnProps } from 'react-table';
 
-export interface CustomSortByClickHandler<D extends AnyObject = UnknownObject> {
+export interface CustomSortByAction<D extends AnyObject = UnknownObject> {
   (
-    column: ColumnInstance<D> & UseSortByColumnProps<D>,
-    event: MouseEvent<HTMLElement>,
+    column: ColumnInstance<D> & UseSortByColumnProps<D> & UseSortingOptionsColumnProps,
     helper: {
       toggleSortBy(descending?: boolean, multi?: boolean): void;
     }
-  ): void;
+  ):
+    | {
+        handler(event: MouseEvent<HTMLElement>): void;
+        children?: ReactNode;
+      }
+    | undefined;
 }
 
 export function LineUpLiteSortByAction<D extends AnyObject = UnknownObject>(
   props: CommonProps & {
     column: ColumnInstance<D> & UseSortByColumnProps<D>;
     children?: ReactNode;
+    outerChildren?: ReactNode;
     iconAsc: ComponentType;
     iconDesc: ComponentType;
-    onClick?: CustomSortByClickHandler<D>;
+    onClick?(event: MouseEvent<HTMLElement>): void;
   }
 ): JSX.Element {
   const { onClick, column } = props;
   const { toggleSortBy, isSorted, isSortedDesc } = column;
   const sort = useCallback(
     (e: MouseEvent<HTMLElement>) =>
-      onClick ? onClick(column, e, { toggleSortBy }) : toggleSortBy(undefined, e.shiftKey || e.ctrlKey || isSorted),
-    [toggleSortBy, isSorted, onClick, column]
+      onClick ? onClick(e) : toggleSortBy(undefined, e.shiftKey || e.ctrlKey || isSorted),
+    [toggleSortBy, isSorted, onClick]
   );
   const c = useLineUpLiteTableContext();
   const i18n = c?.i18n ?? LINEUP_LITE_I18N_EN;
@@ -56,26 +62,29 @@ export function LineUpLiteSortByAction<D extends AnyObject = UnknownObject>(
     title = descFirst ? i18n.sortByAnotherColumnDesc : i18n.sortByAnotherColumn;
   }
   return column.canSort ? (
-    <button
-      {...column.getSortByToggleProps({
-        className: clsx(
-          'lt-action',
-          'lt-action-sort',
-          isSorted && 'lt-action-active',
-          isSortedDesc && 'lt-action-desc',
-          props.className
-        ),
-        style: props.style,
-      })}
-      type="button"
-      onClick={sort}
-      data-index={isSorted && (c?.sortByColumnCount ?? 0) > 1 ? column.sortedIndex + 1 : null}
-      title={title}
-    >
-      {isSortedDesc || (!isSorted && descFirst) ? <props.iconDesc /> : <props.iconAsc />}
-      {props.children}
-    </button>
+    <>
+      <button
+        {...column.getSortByToggleProps({
+          className: clsx(
+            'lt-action',
+            'lt-action-sort',
+            isSorted && 'lt-action-active',
+            isSortedDesc && 'lt-action-desc',
+            props.className
+          ),
+          style: props.style,
+        })}
+        type="button"
+        onClick={sort}
+        data-index={isSorted && (c?.sortByColumnCount ?? 0) > 1 ? column.sortedIndex + 1 : null}
+        title={title}
+      >
+        {isSortedDesc || (!isSorted && descFirst) ? <props.iconDesc /> : <props.iconAsc />}
+        {props.children}
+      </button>
+      {props.outerChildren}
+    </>
   ) : (
-    <></>
+    <>{props.outerChildren}</>
   );
 }
diff --git a/packages/table/src/components/toolbar/LineUpLiteToolbar.tsx b/packages/table/src/components/toolbar/LineUpLiteToolbar.tsx
index deae64b..98cfb5d 100644
--- a/packages/table/src/components/toolbar/LineUpLiteToolbar.tsx
+++ b/packages/table/src/components/toolbar/LineUpLiteToolbar.tsx
@@ -13,12 +13,15 @@ import type {
   UseResizeColumnsColumnProps,
   UseSortByColumnProps,
 } from 'react-table';
+import type { UseSortingOptionsColumnProps, UseGroupingOptionsColumnProps } from '@lineup-lite/hooks';
 import { clsx } from '../utils';
 import { LINEUP_LITE_TEXT_ICONS } from '../../icons';
 import { LineUpLiteSortByAction } from './LineUpLiteSortByAction';
 import { LineUpLiteGroupByAction } from './LineUpLiteGroupByAction';
 import LineUpLiteHideAction from './LineUpLiteHideAction';
 import type { ActionLineUpProps, UnknownObject, AnyObject } from '../interfaces';
+import { LineUpLiteFilterAction } from './LineUpLiteFilterAction';
+import { useLineUpLiteTableContext } from '../contexts';
 
 export interface LineUpLiteToolbarProps<D extends AnyObject = UnknownObject>
   extends ColumnInstance<D>,
@@ -31,10 +34,13 @@ export function LineUpLiteToolbar<D extends AnyObject = UnknownObject>(
   props: PropsWithChildren<LineUpLiteToolbarProps<D>>
 ): JSX.Element {
   const column = props as unknown as ColumnInstance<D> &
+    UseGroupingOptionsColumnProps &
     UseGroupByColumnProps<D> &
     UseResizeColumnsColumnProps<D> &
     UseFiltersColumnProps<D> &
-    UseSortByColumnProps<D> & {
+    UseSortingOptionsColumnProps &
+    UseSortByColumnProps<D> &
+    UseFiltersColumnProps<D> & {
       canHide?: boolean;
     };
   const pIcons = props.icons;
@@ -45,15 +51,46 @@ export function LineUpLiteToolbar<D extends AnyObject = UnknownObject>(
     }),
     [pIcons]
   );
+  const { actionSortBy, actionFilter, actionGroupBy } = props;
+  const actionSortImpl = useMemo(
+    () => actionSortBy?.(column, { toggleSortBy: column.toggleSortBy }),
+    [actionSortBy, column]
+  );
+
+  const c = useLineUpLiteTableContext();
+  const dispatch = c?.dispatch;
+
+  const actionGroupByImpl = useMemo(
+    () =>
+      actionGroupBy?.(column, {
+        toggleGroupBy: column.toggleGroupBy,
+        setGroupBy: () => dispatch?.({ type: 'setGroupBy', value: [column.id] }),
+      }),
+    [actionGroupBy, column, dispatch]
+  );
+  const actionFilterImpl = useMemo(() => actionFilter?.(column), [actionFilter, column]);
+
   return (
     <div className={clsx('lt-toolbar', props.className)} style={props.style}>
       <LineUpLiteSortByAction
         column={column}
         iconAsc={icons.sortAsc}
         iconDesc={icons.sortDesc}
-        onClick={props.actionSortBy}
+        onClick={actionSortImpl?.handler}
+        outerChildren={actionSortImpl?.children}
+      />
+      <LineUpLiteGroupByAction
+        column={column}
+        icon={icons.groupBy}
+        onClick={actionGroupByImpl?.handler}
+        outerChildren={actionGroupByImpl?.children}
+      />
+      <LineUpLiteFilterAction
+        column={column}
+        icon={icons.filterColumn}
+        onClick={actionFilterImpl?.handler}
+        outerChildren={actionFilterImpl?.children}
       />
-      <LineUpLiteGroupByAction column={column} icon={icons.groupBy} onClick={props.actionGroupBy} />
       {props.actions && props.actions(column, icons)}
       {props.children}
       <LineUpLiteHideAction column={column} icon={icons.hideColumn} />
diff --git a/packages/table/src/components/useLineUpLite.ts b/packages/table/src/components/useLineUpLite.ts
index cb954c5..675e0f2 100644
--- a/packages/table/src/components/useLineUpLite.ts
+++ b/packages/table/src/components/useLineUpLite.ts
@@ -20,6 +20,7 @@ import {
   useGroupingOptions,
   UseGroupingOptionsInstanceProps,
   UseGroupingOptionsState,
+  useSortingOptions,
 } from '@lineup-lite/hooks';
 import {
   PluginHook,
@@ -56,7 +57,6 @@ export { useRowRankColumn as featureRowRank } from '@lineup-lite/hooks';
 export {
   useFilters as featureFilterColumns,
   useResizeColumns as featureResizeColumns,
-  useSortBy as featureSortBy,
   useBlockLayout as featureDefaultLayout,
   useFlexLayout as featureFlexLayout,
 } from 'react-table';
@@ -102,8 +102,12 @@ export function featureRowSelect<D extends AnyObject = UnknownObject>(): PluginH
   return [useRowSelectImpl, useRowSelectColumn];
 }
 
+export function featureSortBy<D extends AnyObject = UnknownObject>(): PluginHook<D>[] {
+  return [useSortingOptions, useSortBy];
+}
+
 export function featureSortAndGroupBy<D extends AnyObject = UnknownObject>(): PluginHook<D>[] {
-  return [useGroupingOptions, useGroupByImpl, useSortBy, useExpanded, useRowExpandColumn];
+  return [useGroupingOptions, useGroupByImpl, useSortingOptions, useSortBy, useExpanded, useRowExpandColumn];
 }
 
 /**