update docs

Author: righ

packages/docs/pages/api-reference/props.mdx

@@ -72,6 +72,7 @@ Some properties are only valid for columns or rows:
 |----------|-----------|-------------|
 | `width` | Columns only | Column width in pixels |
 | `height` | Rows only | Row height in pixels |
+| `label` | Columns only | Custom display text for the column header |
 | `labeler` | Both | Custom labeler for headers |
 
 **Note**: If you specify `width` or `height` on a cell address like `D3`, it will be ignored.
@@ -86,6 +87,7 @@ Each cell can be configured with the following properties:
 | `style` | `CSSProperties` | CSS properties for appearance |
 | `justifyContent` | `CSSProperties['justifyContent']` | Horizontal alignment within the cell |
 | `alignItems` | `CSSProperties['alignItems']` | Vertical alignment within the cell |
+| `label` | `string` | Custom display text for column headers (only valid on column specifications, e.g., `A`, `B`) |
 | `labeler` | `string` | Key of a labeler registered in the hub |
 | `width` | `Width` | Cell width in pixels |
 | `height` | `Height` | Cell height in pixels |
@@ -100,6 +102,60 @@ Each cell can be configured with the following properties:
 - **Serialization**: Cell values (except `system` field) are designed to be serializable. Avoid storing non-serializable objects like class instances.
 - **System Field**: The `system` field contains values used by the system to display correct values. Do not modify this field manually.
 
+### Prevention Flags
+
+The `prevention` property uses bitwise flags from the `operations` export to restrict specific operations on cells, columns, or rows. Multiple flags can be combined with the `|` (OR) operator.
+
+```tsx
+import { operations } from '@gridsheet/react-core';
+```
+
+| Flag | Value | Description |
+|------|-------|-------------|
+| `RemoveRows` | 1 | Prevent removing rows |
+| `RemoveCols` | 2 | Prevent removing columns |
+| `InsertRowsAbove` | 4 | Prevent inserting rows above |
+| `InsertRowsBelow` | 8 | Prevent inserting rows below |
+| `InsertColsLeft` | 16 | Prevent inserting columns to the left |
+| `InsertColsRight` | 32 | Prevent inserting columns to the right |
+| `MoveFrom` | 64 | Prevent moving cells from this location |
+| `MoveTo` | 128 | Prevent moving cells to this location |
+| `Write` | 256 | Prevent editing cell values |
+| `Style` | 512 | Prevent changing cell styles |
+| `Resize` | 1024 | Prevent resizing rows/columns |
+| `SetRenderer` | 2048 | Prevent changing cell renderer |
+| `SetParser` | 4096 | Prevent changing cell parser |
+| `Copy` | 8192 | Prevent copying cells |
+| `SetPolicy` | 16384 | Prevent changing cell policy |
+| `Sort` | 32768 | Prevent sorting by this column |
+| `Filter` | 65536 | Prevent filtering by this column |
+| `SetLabel` | 131072 | Prevent editing the column header label |
+| `SetLabeler` | 262144 | Prevent changing the column header labeler |
+
+**Convenience aliases:**
+| Alias | Combines | Description |
+|-------|----------|-------------|
+| `Move` | `MoveFrom \| MoveTo` | Prevent all move operations |
+| `ReadOnly` | `Write \| Style \| Move \| Copy` | Prevent all data modifications |
+| `ViewOnly` | `ReadOnly \| Resize` | Prevent all modifications including resize |
+
+```tsx
+// Prevent sorting and filtering on column C
+{
+  C: {
+    prevention: operations.Sort | operations.Filter,
+  },
+}
+
+// Column with a custom label, protected from label editing
+{
+  A: {
+    label: 'Name',
+    prevention: operations.SetLabel,
+  },
+}
+```
+
 ### Example Usage
 
 ```tsx

packages/docs/pages/api-reference/table.mdx

@@ -282,3 +282,108 @@ const newTable = table.copy({
 });
 sync(newTable); // Required to apply changes
 ```
+
+### Sort and Filter Operations
+
+#### `sortRows(args: { x: number; direction: 'asc' | 'desc' }): UserTable`
+Sorts all data rows by the values in the specified column. Supports ascending and descending order. Null/undefined values are sorted to the end. This operation is recorded in the undo/redo history.
+
+```tsx
+// Sort by column B ascending
+const newTable = table.sortRows({ x: 2, direction: 'asc' });
+sync(newTable);
+
+// Sort by column A descending
+const newTable = table.sortRows({ x: 1, direction: 'desc' });
+sync(newTable);
+```
+
+#### `filterRows(args: { x: number; filter: FilterConfig }): UserTable`
+Applies a filter to the specified column. Rows that do not match the filter conditions are hidden. Multiple columns can have independent filters, and they are combined with AND logic across columns.
+
+The `FilterConfig` object has the following structure:
+
+```tsx
+type FilterConfig = {
+  mode: 'and' | 'or';        // How multiple conditions are combined
+  conditions: FilterCondition[];
+};
+
+type FilterCondition = {
+  method: FilterConditionMethod;  // e.g., 'eq', 'contains', 'gt', etc.
+  value: string[];
+};
+```
+
+Available filter methods:
+
+| Method | Description |
+|--------|-------------|
+| `eq` | Equals |
+| `ne` | Not equals |
+| `gt` | Greater than |
+| `gte` | Greater than or equal |
+| `lt` | Less than |
+| `lte` | Less than or equal |
+| `contains` | Contains substring |
+| `notContains` | Does not contain substring |
+| `empty` | Cell is empty (no value required) |
+| `notEmpty` | Cell is not empty (no value required) |
+
+```tsx
+// Filter column B: show only rows where value > 80
+const newTable = table.filterRows({
+  x: 2,
+  filter: {
+    mode: 'and',
+    conditions: [{ method: 'gt', value: ['80'] }],
+  },
+});
+sync(newTable);
+```
+
+#### `clearFilterRows(x?: number): UserTable`
+Clears filter conditions. If `x` is provided, clears only the filter for that column. If omitted, clears all column filters.
+
+```tsx
+// Clear filter on column B only
+const newTable = table.clearFilterRows(2);
+sync(newTable);
+
+// Clear all filters
+const newTable = table.clearFilterRows();
+sync(newTable);
+```
+
+#### `isRowFiltered(y: number): boolean`
+Returns `true` if the specified row is currently hidden by a filter.
+
+```tsx
+if (table.isRowFiltered(3)) {
+  console.log('Row 3 is hidden by a filter');
+}
+```
+
+#### `hasActiveFilters(): boolean`
+Returns `true` if any column has an active filter.
+
+```tsx
+if (table.hasActiveFilters()) {
+  console.log('Some filters are active');
+}
+```
+
+### Column Label Operations
+
+#### `setColLabel(args: { x: number; label: string }): UserTable`
+Sets a custom display label for the specified column header. If an empty string is provided, the label is removed and the default column letter (A, B, C, ...) is displayed. This operation is recorded in the undo/redo history.
+
+```tsx
+// Set column A header to "Name"
+const newTable = table.setColLabel({ x: 1, label: 'Name' });
+sync(newTable);
+
+// Reset column A header to default ("A")
+const newTable = table.setColLabel({ x: 1, label: '' });
+sync(newTable);
+```

packages/docs/pages/getting-started/features.mdx

@@ -62,6 +62,14 @@ Comprehensive event system for spreadsheet operations:
 - **Initialization Events**: `onInit` for table initialization
 - **Real-time Feedback**: Immediate event notifications for all operations
 
+### Column Menu
+
+Interactive column header menu accessible via the ⋮ button on each column:
+- **Sort**: Sort rows ascending (A→Z) or descending (Z→A) by column values
+- **Filter**: Show/hide rows based on conditions (equals, contains, greater than, etc.) with AND/OR logic and multiple conditions
+- **Label Editing**: Rename column headers directly from the menu
+- **Prevention Support**: Granular control over which operations are available per column using `operations.Sort`, `operations.Filter`, `operations.SetLabel`, `operations.SetLabeler`
+
 ## Performance Features
 
 - **Virtual Scrolling**: Efficient rendering for large datasets