From d18abd70a543c62459f81d34b6a73d16241cb39b Mon Sep 17 00:00:00 2001 From: sarojregmi200 Date: Wed, 25 Jun 2025 16:58:46 +0545 Subject: [PATCH 1/2] fix: omitting custom properties only during render. --- package.json | 2 +- src/Cell.tsx | 2 +- src/utils/useCellDescriptor.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 3254c9b..1550c65 100644 --- a/package.json +++ b/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": { diff --git a/src/Cell.tsx b/src/Cell.tsx index 361563b..251d014 100644 --- a/src/Cell.tsx +++ b/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); diff --git a/src/utils/useCellDescriptor.ts b/src/utils/useCellDescriptor.ts index 9aba4b4..441994a 100644 --- a/src/utils/useCellDescriptor.ts +++ b/src/utils/useCellDescriptor.ts @@ -197,7 +197,7 @@ const useCellDescriptor = ( 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, From 563f351b2badb69760c648b5056da23c5232ba9a Mon Sep 17 00:00:00 2001 From: sarojregmi200 Date: Wed, 25 Jun 2025 17:03:08 +0545 Subject: [PATCH 2/2] chore: Added type for the helper props that will not be rendered. --- src/Column.tsx | 91 +++++++++++++++++++++++++++----------------------- 1 file changed, 49 insertions(+), 42 deletions(-) diff --git a/src/Column.tsx b/src/Column.tsx index bb60a65..8393cdf 100644 --- a/src/Column.tsx +++ b/src/Column.tsx @@ -2,87 +2,94 @@ import React from 'react'; import { RowDataType } from './@types/common'; export type ColumnProps = { - /** 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, event: React.MouseEvent) => void; + onHeaderClick?: (headerProps: Record, event: React.MouseEvent) => void; } // eslint-disable-next-line @typescript-eslint/no-unused-vars function Column(_props: ColumnProps) { - return <>; + return <>; } Column.displayName = 'Table.Column';