enable and fix Fit column layout

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

@@ -78,9 +78,12 @@ export interface TableCellRendererProps
   onCommit?: DataItemCommitHandler;
 }
 
+export type ColumnLayout = "Static" | "Fit";
+
 export interface TableAttributes {
   columnDefaultWidth?: number;
   columnFormatHeader?: "capitalize" | "uppercase";
+  columnLayout?: ColumnLayout;
   columnSeparators?: boolean;
   // showHighlightedRow?: boolean;
   rowSeparators?: boolean;

vuu-ui/packages/vuu-table/src/Table.css

@@ -54,7 +54,6 @@
 }
 
 .vuuTable-scrollbarContainer::-webkit-scrollbar {
-  border: none;
   width: 10px;
 }
 
@@ -63,7 +62,7 @@
 }
 
 .vuuTable-scrollbarContainer::-webkit-scrollbar-track {
-  background-color: white;
+  background-color: transparent;
 }
 .vuuTable-scrollbarContainer::-webkit-scrollbar-thumb {
   background-clip: padding-box;

vuu-ui/packages/vuu-table/src/Table.tsx

@@ -234,9 +234,6 @@ const TableCore = ({
     [`${classBase}-zebra`]: tableAttributes.zebraStripes,
   });
 
-  //TODO move TableBody into separate component
-  // we only render TableBody when we have measured TableHeader
-
   const cssVariables = {
     "--content-height": `${viewportMeasurements.contentHeight}px`,
     "--content-width": `${viewportMeasurements.contentWidth}px`,

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

@@ -149,6 +149,12 @@ export const useTable = ({
     throw Error("no data source provided to Vuu Table");
   }
 
+  const virtualContentHeight = rowHeight * rowCount;
+  const viewportBodyHeight = size.height - headerHeight;
+  const verticalScrollbarWidth =
+    virtualContentHeight > viewportBodyHeight ? 10 : 0;
+  const availableWidth = size.width - (verticalScrollbarWidth + 8);
+
   const rowClassNameGenerator = useRowClassNameGenerators(config);
 
   const useRowDragDrop = allowDragDrop ? useDragDrop : useNullDragDrop;
@@ -168,26 +174,34 @@ export const useTable = ({
     headings,
     tableAttributes,
     tableConfig,
-  } = useTableModel(config, dataSource, selectionModel);
+  } = useTableModel(config, dataSource, selectionModel, availableWidth);
 
   useLayoutEffectSkipFirst(() => {
     dispatchTableModelAction({
+      availableWidth,
       type: "init",
       tableConfig: config,
       dataSource,
     });
-  }, [config, dataSource, dispatchTableModelAction]);
+  }, [
+    availableWidth,
+    config,
+    dataSource,
+    dispatchTableModelAction,
+    verticalScrollbarWidth,
+  ]);
 
   const applyTableConfigChange = useCallback(
     (config: TableConfig) => {
       dispatchTableModelAction({
+        availableWidth,
         type: "init",
         tableConfig: config,
         dataSource,
       });
       onConfigChange?.(stripInternalProperties(config));
     },
-    [dataSource, dispatchTableModelAction, onConfigChange]
+    [availableWidth, dataSource, dispatchTableModelAction, onConfigChange]
   );
 
   const columnMap = useMemo(
@@ -253,13 +267,14 @@ export const useTable = ({
   const handleConfigEditedInSettingsPanel = useCallback(
     (tableConfig: TableConfig) => {
       dispatchTableModelAction({
-        type: "init",
-        tableConfig,
+        availableWidth,
         dataSource,
+        tableConfig,
+        type: "init",
       });
       onConfigChange?.(stripInternalProperties(tableConfig));
     },
-    [dataSource, dispatchTableModelAction, onConfigChange]
+    [availableWidth, dataSource, dispatchTableModelAction, onConfigChange]
   );
 
   const handleDataSourceConfigChanged = useCallback(
@@ -605,13 +620,20 @@ export const useTable = ({
       };
 
       dispatchTableModelAction({
+        availableWidth,
         type: "init",
         tableConfig: newTableConfig,
         dataSource,
       });
       onConfigChange?.(stripInternalProperties(newTableConfig));
     },
-    [dataSource, dispatchTableModelAction, onConfigChange, tableConfig]
+    [
+      availableWidth,
+      dataSource,
+      dispatchTableModelAction,
+      onConfigChange,
+      tableConfig,
+    ]
   );
 
   const handleDropRow = useCallback(

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

@@ -12,6 +12,7 @@ import {
   applyFilterToColumns,
   applyGroupByToColumns,
   applySortToColumns,
+  applyWidthToColumns,
   existingSort,
   getCellRenderer,
   getColumnHeaderContentRenderer,
@@ -91,6 +92,7 @@ export interface TableModel extends TableAttributes {
  * readonly copy of the original TableConfig.
  */
 interface InternalTableModel extends TableModel {
+  availableWidth: number;
   tableConfig: Readonly<TableConfig>;
 }
 
@@ -103,6 +105,7 @@ const getDefaultAlignment = (serverDataType?: VuuColumnDataType) =>
     : "left";
 
 export interface ColumnActionInit {
+  availableWidth: number;
   type: "init";
   tableConfig: TableConfig;
   dataSource: DataSource;
@@ -235,14 +238,20 @@ const columnReducer: GridModelReducer = (state, action) => {
 export const useTableModel = (
   tableConfigProp: TableConfig,
   dataSource: DataSource,
-  selectionModel: TableSelectionModel
+  selectionModel: TableSelectionModel,
+  availableWidth: number
 ) => {
   const [state, dispatchTableModelAction] = useReducer<
     GridModelReducer,
     InitialConfig
   >(
     columnReducer,
-    { tableConfig: tableConfigProp, dataSource, selectionModel },
+    {
+      availableWidth,
+      tableConfig: tableConfigProp,
+      dataSource,
+      selectionModel,
+    },
     init
   );
 
@@ -258,17 +267,22 @@ export const useTableModel = (
 };
 
 type InitialConfig = {
+  availableWidth: number;
+  columnLayout?: ColumnLayout;
   dataSource: DataSource;
-  // TODO are we at risk of losing selectionModel on updates ?
   selectionModel?: TableSelectionModel;
   tableConfig: TableConfig;
 };
 
 function init({
+  availableWidth,
   dataSource,
   selectionModel,
   tableConfig,
 }: InitialConfig): InternalTableModel {
+  console.log(
+    `init model ${tableConfig?.columnLayout} columns, availableWidth=${availableWidth}`
+  );
   const { columns, ...tableAttributes } = tableConfig;
   const { config: dataSourceConfig, tableSchema } = dataSource;
   const toRuntimeColumnDescriptor = columnDescriptorToRuntimeColumDescriptor(
@@ -279,9 +293,15 @@ function init({
     .filter(subscribedOnly(dataSourceConfig?.columns))
     .map(toRuntimeColumnDescriptor);
 
-  const columnsInRenderOrder = runtimeColumns.some(isPinned)
-    ? sortPinnedColumns(runtimeColumns)
-    : runtimeColumns;
+  const { columnLayout = "Fit" } = tableConfig;
+  const runtimeColumnsWithLayout = applyWidthToColumns(runtimeColumns, {
+    availableWidth,
+    columnLayout,
+  });
+
+  const columnsInRenderOrder = runtimeColumnsWithLayout.some(isPinned)
+    ? sortPinnedColumns(runtimeColumnsWithLayout)
+    : runtimeColumnsWithLayout;
 
   if (selectionModel === "checkbox") {
     columnsInRenderOrder.splice(
@@ -292,6 +312,7 @@ function init({
   }
 
   let state: InternalTableModel = {
+    availableWidth,
     columns: columnsInRenderOrder,
     headings: getTableHeadings(columnsInRenderOrder),
     tableConfig,
@@ -348,7 +369,7 @@ const columnDescriptorToRuntimeColumDescriptor =
       originalIdx: index,
       serverDataType,
       valueFormatter: getValueFormatter(column, serverDataType),
-      width: width,
+      width,
     };
 
     if (isGroupColumn(runtimeColumnWithDefaults)) {

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

@@ -81,9 +81,9 @@ export const useTableViewport = ({
 }: TableViewportHookProps): TableViewportHookResult => {
   const inSituRowOffsetRef = useRef(0);
   const pctScrollTopRef = useRef(0);
-  // TODO we are limited by pixels not an arbitraty number of rows
-  const pixelContentHeight = Math.min(rowHeight * rowCount, MAX_PIXEL_HEIGHT);
+  // TODO we are limited by pixels not an arbitrary number of rows
   const virtualContentHeight = rowCount * rowHeight;
+  const pixelContentHeight = Math.min(virtualContentHeight, MAX_PIXEL_HEIGHT);
   const virtualisedExtent = virtualContentHeight - pixelContentHeight;
 
   const { pinnedWidthLeft, pinnedWidthRight, unpinnedWidth } = useMemo(
@@ -129,7 +129,7 @@ export const useTableViewport = ({
   return useMemo(() => {
     if (size) {
       // TODO determine this at runtime
-      const scrollbarSize = 15;
+      const scrollbarSize = 10;
       const contentWidth = pinnedWidthLeft + unpinnedWidth + pinnedWidthRight;
       const horizontalScrollbarHeight =
         contentWidth > size.width ? scrollbarSize : 0;