docs(changeset): Extra api options, local data options

src/Gridler/components/GridlerStore.tsx

@@ -93,6 +93,7 @@ export interface GridlerProps extends PropsWithChildren {
     bottom?: React.ReactNode;
     left?: React.ReactNode;
     right?: React.ReactNode;
+    rightElementDisabled?: boolean;
     rightElementEnd?: React.ReactNode;
     rightElementStart?: React.ReactNode;
     top?: React.ReactNode;
@@ -100,6 +101,7 @@ export interface GridlerProps extends PropsWithChildren {
   selectedRow?: number;
   selectMode?: 'cell' | 'row';
   showMenu?: (id: string, options?: Partial<MantineBetterMenuInstance>) => void;
+  title?: string;
   tooltipBarProps?: React.HTMLAttributes<HTMLDivElement>;
   total_rows?: number;
   uniqueid: string;
@@ -426,13 +428,10 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
 
       const items =
         area === 'menu'
-          ? [
-              {
-                label: `Side menu`,
-              },
-            ]
+          ? [{ leftSection: <IconGrid4x4 size={16} />, title: s.title ?? 'Grid' }]
           : coldef
             ? [
+                { leftSection: <IconGrid4x4 size={16} />, title: s.title ?? 'Grid' },
                 {
                   items: [
                     {

src/Gridler/components/RightMenuIcon.tsx

@@ -3,7 +3,7 @@ import { IconMenu2 } from '@tabler/icons-react';
 
 import { useGridlerStore } from './GridlerStore';
 
-export function RightMenuIcon() {
+export function GridlerRightMenuIcon() {
   const { loadingData, onContextClick } = useGridlerStore((s) => ({
     loadingData: s.loadingData,
     onContextClick: s.onContextClick,

src/Gridler/components/adaptors/GlidlerAPIAdaptorForGoLangv2.tsx

@@ -3,10 +3,15 @@ import React, { useEffect } from 'react';
 
 import type { APIOptions } from '../../utils/types';
 
+import { GoAPIHeaders, type GoAPIOperation } from '../../utils/golang-restapi-v2';
 import { useGridlerStore } from '../GridlerStore';
 
-//The computer component does not need to be recalculated on every render, so we use React.memo to prevent unnecessary re-renders.
-export const GlidlerAPIAdaptorForGoLangv2 = React.memo((props: APIOptions) => {
+export interface GlidlerAPIAdaptorForGoLangv2Props<T = unknown> extends APIOptions {
+  initialData?: Array<T>;
+  options?: Array<GoAPIOperation>;
+}
+
+function _GlidlerAPIAdaptorForGoLangv2<T = unknown>(props: GlidlerAPIAdaptorForGoLangv2Props<T>) {
   const [setStateFN, setState, getState, addError, mounted] = useGridlerStore((s) => [
     s.setStateFN,
     s.setState,
@@ -49,6 +54,13 @@ export const GlidlerAPIAdaptorForGoLangv2 = React.memo((props: APIOptions) => {
             });
         }
 
+        if (props.options && props.options.length > 0) {
+          const optionHeaders = GoAPIHeaders(props.options);
+          for (const oh in optionHeaders) {
+            head.set(oh, optionHeaders[oh]);
+          }
+        }
+
         const currentRequestIndex = _active_requests?.findIndex((f) => f.page === index) ?? -1;
         _active_requests?.forEach((r) => {
           if ((r.page >= 0 && r.page < index - 2) || (index >= 0 && r.page > index + 2)) {
@@ -142,6 +154,9 @@ export const GlidlerAPIAdaptorForGoLangv2 = React.memo((props: APIOptions) => {
   }, [props.url, props.authtoken, mounted, setState]);
 
   return <></>;
-});
+}
+
+//The computer component does not need to be recalculated on every render, so we use React.memo to prevent unnecessary re-renders.
+export const GlidlerAPIAdaptorForGoLangv2 = React.memo(_GlidlerAPIAdaptorForGoLangv2);
 
 GlidlerAPIAdaptorForGoLangv2.displayName = 'Gridler-GlidlerAPIAdaptorForGoLangv2';

src/Gridler/components/adaptors/GlidlerFormAdaptor.tsx

@@ -45,9 +45,9 @@ export function GlidlerFormAdaptor(props: {
       }
 
       const items = [] as Array<MantineBetterMenuInstanceItem>;
-      if (defaultItems && id === 'cell') {
-        items.push(...(defaultItems as Array<MantineBetterMenuInstanceItem>));
-      }
+
+      items.push(...(defaultItems as Array<MantineBetterMenuInstanceItem>));
+
       const rows = getState('_gridSelection')?.rows.toArray() ?? [];
       const manyRows = rows.length > 1;
 

src/Gridler/components/adaptors/GlidlerLocalDataAdaptor.tsx

@@ -1,15 +1,40 @@
 import React, { useEffect } from 'react';
 
-import { useGridlerStore } from '../GridlerStore';
+import type { GridlerColumns } from '../Column';
 
-export interface GlidlerLocalDataAdaptorProps {
-  data: Array<unknown>;
+import { type FilterOption, type SortOption, useGridlerStore } from '../GridlerStore';
+
+export interface GlidlerLocalDataAdaptorProps<T = unknown> {
+  data: Array<T>;
+  onColumnFilter?: (
+    colFilters: Array<FilterOption> | undefined,
+    cols: GridlerColumns | undefined,
+    data: Array<T>
+  ) => Array<T>;
+  onColumnSort?: (
+    colSort: Array<SortOption> | undefined,
+    cols: GridlerColumns | undefined,
+    data: Array<T>
+  ) => Array<T>;
 }
 
 //The computer component does not need to be recalculated on every render, so we use React.memo to prevent unnecessary re-renders.
-export const GlidlerLocalDataAdaptor = React.memo((props: GlidlerLocalDataAdaptorProps) => {
+function _GlidlerLocalDataAdaptor<T = unknown>(props: GlidlerLocalDataAdaptorProps<T>) {
   const [setState, getState, mounted] = useGridlerStore((s) => [s.setState, s.getState, s.mounted]);
 
+  const { colFilters, colSort, columns } = useGridlerStore((s) => ({
+    colFilters: s.colFilters,
+    colOrder: s.colOrder,
+    colSize: s.colSize,
+    colSort: s.colSort,
+    columns: s.columns,
+  }));
+
+  const refChanged = React.useRef({
+    colFilters: colFilters,
+    colSort: colSort,
+  });
+
   const useAPIQuery: (index: number) => Promise<any> = async (index: number) => {
     const pageSize = getState('pageSize');
 
@@ -25,7 +50,26 @@ export const GlidlerLocalDataAdaptor = React.memo((props: GlidlerLocalDataAdapto
     setState('useAPIQuery', useAPIQuery);
   }, [mounted, setState]);
 
+  useEffect(() => {
+    if (props.onColumnSort && colSort !== refChanged?.current?.colSort) {
+      const sortedData = props.onColumnSort(colSort, columns, props.data as Array<T>);
+      setState('total_rows', sortedData.length);
+      setState('data', sortedData);
+      refChanged.current.colSort = colSort;
+    }
+  }, [colSort, props.onColumnSort]);
+
+  useEffect(() => {
+    if (props.onColumnFilter && colFilters !== refChanged?.current?.colFilters) {
+      const filteredData = props.onColumnFilter(colFilters, columns, props.data as Array<T>);
+      setState('total_rows', filteredData.length);
+      setState('data', filteredData);
+      refChanged.current.colFilters = colFilters;
+    }
+  }, [colFilters, props.onColumnFilter]);
+
   return <></>;
-});
+}
+export const GlidlerLocalDataAdaptor = React.memo(_GlidlerLocalDataAdaptor);
 
 GlidlerLocalDataAdaptor.displayName = 'Gridler-GlidlerLocalDataAdaptor';