fix checkbox Table bug

Author: heswell

vuu-ui/packages/vuu-table-types/index.d.ts

@@ -240,6 +240,11 @@ export declare type ColumnAlignment = "left" | "right";
 export interface ColumnDescriptor extends DataValueDescriptor {
   aggregate?: VuuAggType;
   align?: ColumnAlignment;
+  /**
+   * ColumnMenu is enabled across all columns with a Table prop 'showColumnHeaderMenus'.
+   * This property can be used to disable this feature for a single column.
+   */
+  allowColumnHeaderMenu?: false;
   className?: string;
   /**
    * Allows custom content to be rendered into the column header. This will be an identifier.

vuu-ui/packages/vuu-table/src/header-cell/HeaderCell.tsx

@@ -44,7 +44,11 @@ export const HeaderCell = ({
   });
   const dragDropSortHook = allowDragColumnHeader ? useSortable : doNothing;
   const { ref: sortableRef } = dragDropSortHook({ id, index });
-  const { HeaderCellContentRenderer, HeaderCellLabelRenderer } = column;
+  const {
+    allowColumnHeaderMenu = true,
+    HeaderCellContentRenderer,
+    HeaderCellLabelRenderer,
+  } = column;
   const rootRef = useRef<HTMLDivElement>(null);
   const { isResizing, ...resizeProps } = useTableColumnResize({
     column,
@@ -66,7 +70,7 @@ export const HeaderCell = ({
       ? [<HeaderCellContentRenderer column={column} key="content" />]
       : [];
 
-    if (showColumnHeaderMenus) {
+    if (showColumnHeaderMenus && allowColumnHeaderMenu) {
       const menuPermissions =
         showColumnHeaderMenus === true ? undefined : showColumnHeaderMenus;
       const columnMenu = (
@@ -88,6 +92,7 @@ export const HeaderCell = ({
   }, [
     HeaderCellContentRenderer,
     HeaderCellLabelRenderer,
+    allowColumnHeaderMenu,
     column,
     showColumnHeaderMenus,
   ]);

vuu-ui/packages/vuu-table/src/useTable.ts

@@ -240,24 +240,38 @@ export const useTable = ({
   useLayoutEffectSkipFirst(() => {
     dispatchTableModelAction({
       availableWidth,
+      selectionModel,
       type: "init",
       tableConfig: tableConfigRef.current,
       dataSource,
     });
-  }, [availableWidth, config, dataSource, dispatchTableModelAction]);
+  }, [
+    availableWidth,
+    config,
+    dataSource,
+    dispatchTableModelAction,
+    selectionModel,
+  ]);
 
   const applyTableConfigChange = useCallback(
     (config: TableConfig) => {
       dispatchTableModelAction({
         availableWidth,
+        selectionModel,
         type: "init",
         tableConfig: config,
         dataSource,
       });
       tableConfigRef.current = config;
       onConfigChange?.(stripInternalProperties(config));
     },
-    [availableWidth, dataSource, dispatchTableModelAction, onConfigChange],
+    [
+      availableWidth,
+      dataSource,
+      dispatchTableModelAction,
+      onConfigChange,
+      selectionModel,
+    ],
   );
 
   const columnMap = useMemo(
@@ -327,13 +341,20 @@ export const useTable = ({
       dispatchTableModelAction({
         availableWidth,
         dataSource,
+        selectionModel,
         tableConfig,
         type: "init",
       });
       tableConfigRef.current = tableConfig;
       onConfigChange?.(stripInternalProperties(tableConfig));
     },
-    [availableWidth, dataSource, dispatchTableModelAction, onConfigChange],
+    [
+      availableWidth,
+      dataSource,
+      dispatchTableModelAction,
+      onConfigChange,
+      selectionModel,
+    ],
   );
 
   const handleDataSourceConfigChanged = useCallback(

vuu-ui/packages/vuu-table/src/useTableModel.ts

@@ -67,6 +67,7 @@ const getDataType = (
 };
 
 const checkboxColumnDescriptor: ColumnDescriptor = {
+  allowColumnHeaderMenu: false,
   label: "",
   name: "",
   width: 25,
@@ -111,6 +112,7 @@ const getDefaultAlignment = (serverDataType?: VuuColumnDataType) =>
 
 export interface ColumnActionInit {
   availableWidth: number;
+  selectionModel?: TableSelectionModel;
   type: "init";
   tableConfig: TableConfig;
   dataSource: DataSource;

vuu-ui/showcase/src/examples/Table/Misc.examples.tsx

@@ -344,6 +344,38 @@ export const TableInLayoutWithContextPanel = () => {
   );
 };
 
+export const CheckboxTableInLayoutWithContextPanel = () => {
+  useMemo(() => {
+    registerComponent("ColumnSettings", ColumnSettingsPanel, "view");
+    registerComponent("TableSettings", TableSettingsPanel, "view");
+  }, []);
+  const tableConfig = useMemo<TableConfig>(() => {
+    return {
+      columns: getSchema("instruments").columns,
+      rowSeparators: true,
+      zebraStripes: true,
+    };
+  }, []);
+  const dataSource = useMemo(() => {
+    return vuuModule("SIMUL").createDataSource("instruments");
+  }, []);
+
+  return (
+    <LayoutProvider>
+      <FlexboxLayout style={{ height: 645, width: "100%" }}>
+        <Table
+          config={tableConfig}
+          dataSource={dataSource}
+          renderBufferSize={30}
+          selectionModel="checkbox"
+          width="100%"
+        />
+        <ContextPanel id={VuuShellLocation.ContextPanel} overlay></ContextPanel>
+      </FlexboxLayout>
+    </LayoutProvider>
+  );
+};
+
 const NullContext = {
   component: undefined,
   expanded: false,