feat(core): add column pinning and grouping features to Griddy table

- Implement column pinning functionality allowing users to pin columns to the left or right.
- Introduce data grouping capabilities for better data organization.
- Enhance the theming guide with new styles for pinned columns and loading indicators.
- Add infinite scroll support with loading indicators for improved user experience.
- Update CSS styles to accommodate new features and improve visual feedback.

src/Griddy/core/Griddy.tsx

@@ -2,11 +2,14 @@ import {
   type ColumnDef,
   type ColumnFiltersState,
   type ColumnOrderState,
+  type ColumnPinningState,
   getCoreRowModel,
   getExpandedRowModel,
   getFilteredRowModel,
+  getGroupedRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  type GroupingState,
   type PaginationState,
   type RowSelectionState,
   type SortingState,
@@ -49,11 +52,14 @@ function GriddyInner<T>({ tableRef }: { tableRef: Ref<GriddyRef<T>> }) {
   const getRowId = useGriddyStore((s) => s.getRowId)
   const selection = useGriddyStore((s) => s.selection)
   const search = useGriddyStore((s) => s.search)
+  const groupingConfig = useGriddyStore((s) => s.grouping)
   const paginationConfig = useGriddyStore((s) => s.pagination)
   const controlledSorting = useGriddyStore((s) => s.sorting)
   const onSortingChange = useGriddyStore((s) => s.onSortingChange)
   const controlledFilters = useGriddyStore((s) => s.columnFilters)
   const onColumnFiltersChange = useGriddyStore((s) => s.onColumnFiltersChange)
+  const controlledPinning = useGriddyStore((s) => s.columnPinning)
+  const onColumnPinningChange = useGriddyStore((s) => s.onColumnPinningChange)
   const controlledRowSelection = useGriddyStore((s) => s.rowSelection)
   const onRowSelectionChange = useGriddyStore((s) => s.onRowSelectionChange)
   const onEditCommit = useGriddyStore((s) => s.onEditCommit)
@@ -93,6 +99,21 @@ function GriddyInner<T>({ tableRef }: { tableRef: Ref<GriddyRef<T>> }) {
   const [globalFilter, setGlobalFilter] = useState<string | undefined>(undefined)
   const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})
   const [columnOrder, setColumnOrder] = useState<ColumnOrderState>([])
+
+  // Build initial column pinning from column definitions
+  const initialPinning = useMemo(() => {
+    const left: string[] = []
+    const right: string[] = []
+    userColumns?.forEach(col => {
+      if (col.pinned === 'left') left.push(col.id)
+      else if (col.pinned === 'right') right.push(col.id)
+    })
+    return { left, right }
+  }, [userColumns])
+
+  const [internalPinning, setInternalPinning] = useState<ColumnPinningState>(initialPinning)
+  const [grouping, setGrouping] = useState<GroupingState>(groupingConfig?.columns ?? [])
+  const [expanded, setExpanded] = useState({})
   const [internalPagination, setInternalPagination] = useState<PaginationState>({
     pageIndex: 0,
     pageSize: paginationConfig?.pageSize ?? DEFAULTS.pageSize,
@@ -120,6 +141,8 @@ function GriddyInner<T>({ tableRef }: { tableRef: Ref<GriddyRef<T>> }) {
   const setSorting = onSortingChange ?? setInternalSorting
   const columnFilters = controlledFilters ?? internalFilters
   const setColumnFilters = onColumnFiltersChange ?? setInternalFilters
+  const columnPinning = controlledPinning ?? internalPinning
+  const setColumnPinning = onColumnPinningChange ?? setInternalPinning
   const rowSelectionState = controlledRowSelection ?? internalRowSelection
   const setRowSelection = onRowSelectionChange ?? setInternalRowSelection
 
@@ -132,21 +155,29 @@ function GriddyInner<T>({ tableRef }: { tableRef: Ref<GriddyRef<T>> }) {
     columns,
     data: (data ?? []) as T[],
     enableColumnResizing: true,
+    enableExpanding: true,
     enableFilters: true,
+    enableGrouping: groupingConfig?.enabled ?? false,
     enableMultiRowSelection,
     enableMultiSort: true,
+    enablePinning: true,
     enableRowSelection,
     enableSorting: true,
     getCoreRowModel: getCoreRowModel(),
+    getExpandedRowModel: getExpandedRowModel(),
     getFilteredRowModel: manualFiltering ? undefined : getFilteredRowModel(),
+    getGroupedRowModel: groupingConfig?.enabled ? getGroupedRowModel() : undefined,
     getRowId: getRowId as any ?? ((_, index) => String(index)),
     getSortedRowModel: manualSorting ? undefined : getSortedRowModel(),
     manualFiltering: manualFiltering ?? false,
     manualSorting: manualSorting ?? false,
     onColumnFiltersChange: setColumnFilters as any,
     onColumnOrderChange: setColumnOrder,
+    onColumnPinningChange: setColumnPinning as any,
     onColumnVisibilityChange: setColumnVisibility,
+    onExpandedChange: setExpanded,
     onGlobalFilterChange: setGlobalFilter,
+    onGroupingChange: setGrouping,
     onPaginationChange: paginationConfig?.enabled ? handlePaginationChange : undefined,
     onRowSelectionChange: setRowSelection as any,
     onSortingChange: setSorting as any,
@@ -154,15 +185,17 @@ function GriddyInner<T>({ tableRef }: { tableRef: Ref<GriddyRef<T>> }) {
     state: {
       columnFilters,
       columnOrder,
+      columnPinning,
       columnVisibility,
+      expanded,
       globalFilter,
+      grouping,
       rowSelection: rowSelectionState,
       sorting,
       ...(paginationConfig?.enabled ? { pagination: internalPagination } : {}),
     },
     ...(paginationConfig?.enabled ? { getPaginationRowModel: getPaginationRowModel() } : {}),
     columnResizeMode: 'onChange',
-    getExpandedRowModel: getExpandedRowModel(),
   })
 
   // ─── Scroll Container Ref ───