Fix render helper keys

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightsoftware/table",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "A React table library by bright office system.",
   "license": "MIT",
   "author": {

src/Cell.tsx

@@ -101,7 +101,7 @@ const Cell = React.memo(React.forwardRef(
             onTreeToggle,
             truncate,
             ...rest
-        } = props;
+        } = omit(props, ["hideable", "sortable", "searchable", "pinnable"]);
 
         const { rtl, hasCustomTreeCol, isTree } = React.useContext(TableContext);
 

src/Column.tsx

@@ -2,87 +2,94 @@ import React from 'react';
 import { RowDataType } from './@types/common';
 
 export type ColumnProps<Row extends RowDataType> = {
-    /** Alignment */
-    align?: React.CSSProperties['justifyContent'];
+  /** Alignment */
+  align?: React.CSSProperties['justifyContent'];
 
-    /** Merges column cells to merge when the dataKey value for the merged column is null or undefined. */
-    colSpan?: number;
+  /** Merges column cells to merge when the dataKey value for the merged column is null or undefined. */
+  colSpan?: number;
 
-    /** Merges rows on the specified column. */
-    rowSpan?: (rowData: Row) => number;
+  /** Merges rows on the specified column. */
+  rowSpan?: (rowData: Row) => number;
 
-    /** Whether to display the full text of the cell content when the mouse is hovered */
-    fullText?: boolean;
+  /** Whether to display the full text of the cell content when the mouse is hovered */
+  fullText?: boolean;
 
-    /** Vertical alignment */
-    verticalAlign?: React.CSSProperties['alignItems'] | 'top' | 'middle' | 'bottom';
+  /** Vertical alignment */
+  verticalAlign?: React.CSSProperties['alignItems'] | 'top' | 'middle' | 'bottom';
 
-    /** Column width */
-    width?: number;
+  /** Column width */
+  width?: number;
 
-    /** Customizable Resize Column width */
-    resizable?: boolean;
+  /** Customizable Resize Column width */
+  resizable?: boolean;
 
-    /** A column of a tree */
-    treeCol?: boolean;
+  /** A column of a tree */
+  treeCol?: boolean;
 
-    /** Set the column width automatically adjusts, when set flexGrow cannot set resizable and width property */
-    flexGrow?: number;
+  /** Set the column width automatically adjusts, when set flexGrow cannot set resizable and width property */
+  flexGrow?: number;
 
-    /** When you use flexGrow, you can set a minimum width by  minwidth */
-    minWidth?: number;
+  /** When you use flexGrow, you can set a minimum width by  minwidth */
+  minWidth?: number;
 
-    /** Configure the cells of the column */
-    children?: React.ReactNode;
+  /** Configure the cells of the column */
+  children?: React.ReactNode;
 
-    /** Callback function for resize the colum */
-    onResize?: (columnWidth?: number, dataKey?: string) => void;
+  /** Callback function for resize the colum */
+  onResize?: (columnWidth?: number, dataKey?: string) => void;
 
-    isHidden?: boolean;
+  isHidden?: boolean;
 
-    /**
+  /**
      * Pins the column to the leftmost position or rightmost position making
      * other pinnnable columns come second or third.
      */
-    fixedPin?: "left" | "right";
+  fixedPin?: "left" | "right";
 } & (tnoCustomizableFields | tcustomizableField)
 
 export type tnoCustomizableFields = {
-    /**
+  /**
      * Customizable Field 
      * if set to true, the column can be customized
      * by customized I mean, it can be searched, sorted, or hidden.
      */
-    customizable?: undefined | false,
-    id?: string
+  customizable?: undefined | false,
+  id?: string
 
-    sort?: never;
-    pinned?: never;
-    hidden?: never;
-    onHeaderClick?: never;
+  sort?: never;
+  pinned?: never;
+  hidden?: never;
+  onHeaderClick?: never;
 }
 
 export type tcustomizableField = {
-    /**
+  /**
      * Customizable Field 
      * if set to true, the column can be customized
      * by customized I mean, it can be searched, sorted, or hidden.
      */
-    customizable?: true;
-    id: string;
-    sort?: "asc" | "desc";
-    pinned?: "right" | "left" | boolean;
+  customizable?: true;
+  id: string;
+  sort?: "asc" | "desc";
+  pinned?: "right" | "left" | boolean;
 
-    /**
+  // Helpers for column modification control through context menu
+  "hideable":boolean;
+  "sortable":boolean;
+  "searchable":boolean;
+
+  "pinnable": boolean;
+
+  /**
      * When the header is clicked,
      * the callback function will be called.
      */
-    onHeaderClick?: (headerProps: Record<string, any>, event: React.MouseEvent) => void;
+  onHeaderClick?: (headerProps: Record<string, any>, event: React.MouseEvent) => void;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function Column<Row extends RowDataType>(_props: ColumnProps<Row>) {
-    return <></>;
+  return <></>;
 }
 
 Column.displayName = 'Table.Column';

src/utils/useCellDescriptor.ts

@@ -197,7 +197,7 @@ const useCellDescriptor = <Row extends RowDataType>(
         let isLastCol = index === count - 1
 
         const cellProps = {
-            ...omit(columnProps, ['children', "pinned", "sort", "onHeaderClick", "customizable", "isHidden", "fixedPin", "hideable", "sortable", "searchable", "pinnable"]),
+            ...omit(columnProps, ['children', "pinned", "sort", "onHeaderClick", "customizable", "isHidden", "fixedPin", ]),
             'aria-colindex': index + 1,
             left,
             headerHeight,