@ui5/webcomponents-react/wrappers/components/AnalyticalTable/hooks/usePopIn.js

React Wrapper for UI5 Web Components and additional components

import { AnalyticalTablePopinDisplay } from '../../../enums/AnalyticalTablePopinDisplay.js';
const popInVisibleColumnsDeps = (deps, {
  instance: {
    state
  }
}) => [...deps, state.tableClientWidth];
const popInVisibleColumns = (cols, {
  instance
}) => {
  const {
    state,
    dispatch
  } = instance;
  const tableClientWidth = state.isScrollable ? state?.tableClientWidth + 13 /*scrollbar width*/ : state?.tableClientWidth;
  const popInColumns = cols.filter(item => {
    return item.responsivePopIn && tableClientWidth < item.responsiveMinWidth;
  }).map(item => ({
    id: item.id ?? item.accessor,
    column: item,
    // initially visibleColumns don't include the defaults
    popinDisplay: item.popinDisplay || AnalyticalTablePopinDisplay.Block
  }));
  dispatch({
    type: 'SET_POPIN_COLUMNS',
    payload: popInColumns
  });
  return cols.filter(col => !popInColumns.some(item => item.id === (col.id ?? col.accessor)) && (Object.prototype.hasOwnProperty.call(col, 'responsiveMinWidth') ? !tableClientWidth || tableClientWidth >= col.responsiveMinWidth : true));
};
export const usePopIn = hooks => {
  hooks.visibleColumns.push(popInVisibleColumns);
  hooks.visibleColumnsDeps.push(popInVisibleColumnsDeps);
};
usePopIn.pluginName = 'usePopIn';