[usePinColumns] Ability to pin columns

[gargroh]

Using v7?

Hi @tannerlinsley, wanted to check is there any plan to implement a react table hook for pinning(freezing) of columns to left/right of table.

I have a following rough structure of usePinColumns hook, any advise on architecture or implementation(which you have thought of) for the implementation of this functionality will be helpful to complete this.

usePinColumns.js

import PropTypes from 'prop-types';

import { mergeProps, applyPropHooks, ensurePluginOrder } from '../utils';
import { addActions, actions } from '../actions';
import { defaultState } from '../hooks/useTableState';

defaultState.pinnedColumns = {
  left: [],
  center: [],
  right: []
};

addActions('setColumnPin');

const propTypes = {};

export const usePinColumns = (hooks) => {
  hooks.useMain.push(useMain);
};

usePinColumns.pluginName = 'usePinColumns';

function useMain(instance) {
  PropTypes.checkPropTypes(propTypes, instance, 'property', 'usePinColumns');

  const {
    hooks,
    plugins,
    flatColumns,
    state: [{ pinnedColumns }, setState]
  } = instance;

  ensurePluginOrder(plugins, [], 'usePinColumns', []);

  const setColumnPin = (columnID, pinType) => {
    // debugger;
    const column = flatColumns.find((d) => d.id === columnID);
    console.log(column.pinned);
    column.pinned = pinType;
    console.log(column.pinned);

    // -1 = LEFT
    // 0 = CENTER
    // 1 = RIGHT

    let newPinnedColumns = {};
    newPinnedColumns.left = [];
    newPinnedColumns.right = [];
    newPinnedColumns.center = [];

    flatColumns.forEach((column) => {
      if (column.pinned === -1) {
        newPinnedColumns.left.push(column);
      } else if (column.pinned === 1) {
        newPinnedColumns.right.push(column);
      } else {
        newPinnedColumns.center.push(column);
      }
    });

    return setState((old) => {
      return {
        ...old,
        flatColumns: flatColumns,
        pinnedColumns: newPinnedColumns
      };
    }, actions.setColumnPin);
  };

  flatColumns.forEach((column) => {
    column.canPin = true;
    // column.pinned = 0;
    column.setColumnPin = (pinType) => setColumnPin(column.id, pinType);
  });

  return {
    ...instance,
    setColumnPin
  };
}

[tannerlinsley]

You'll want to start by using the columnsBeforeHeaderGroups hook, instead of useMain. That is where I recommend doing any flat column reordering. After that hook is when column headers are reconstructed from the bottom up. flatColumns is mostly just useful for data/model information, not layout. headerGroups is what users use to layout the table.

[gargroh]

Thanks for the explanation Tanner. #1510

[tannerlinsley]

Hmm, what's the blocker here?

[anishpatelyaadada]

@gargroh did you found any solution for fix column

[gargroh]

@anishpatelyaadada what i had closest was https://gist.github.com/gargroh/ab11066424a0bdc775fe0f7eeb451a16, now will need upgrdation acc. to latest architecture.

[anishpatelyaadada]

@gargroh i think so you can use this library but its still in beta version https://github.com/GuillaumeJasmin/react-table-sticky

[gargroh]

Thanks @anishpatelyaadada for that library, but is it possible in above to fix a sub header, like i tried making info as fix but that didn't work, let me know in case i am missing something.

Can be reproduced at - https://codesandbox.io/s/react-table-sticky-official-0fc2m

[anishpatelyaadada]

@gargroh I try that library too but it's still in beta mode so it having an error. please refer to this example https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/grouping-column

[tannerlinsley]

I'm not sure what we ended up with here, but I'm happy to open this again if we can get some good direction and a plan for it.