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

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';