React-table: useFlexLayout plugin hook error

Created on 2 Aug 2019 · 17Comments · Source: tannerlinsley/react-table

V7
I'm not sure if I am doing something wrong with the configuration of the useFlexLayout plugin but using it gives the following error: Cannot read property 'columns' of undefined

I am using the plugin as shown below.

  const { getTableProps, headerGroups, rows, prepareRow } = useTable({
    columns,
    data,
  },
  useFlexLayout
  )

This error occurs in version 7.0.0-alpha.13 and above

Source

Codar97

👍1

Most helpful comment

If you urgently need it here's my updated version, works pretty much the same as the old one and is compatible with alpha.19. Since @tannerlinsley mentioned potential deprecation I guess it can be useful in the future.

import PropTypes from 'prop-types';

function sum(arr) {
  return arr.reduce((prev, curr) => prev + curr, 0);
}

function getFirstDefined(...args) {
  for (let i = 0; i < args.length; i += 1) {
    if (typeof args[i] !== 'undefined') {
      return args[i];
    }
  }
  return undefined;
}

function getSizesForColumn({ columns, id, width, minWidth, maxWidth }, defaultFlex) {
  if (columns) {
    columns = columns
      .filter(col => col.show || col.visible)
      .map(column => getSizesForColumn(column, defaultFlex))
      .filter(Boolean);

    if (!columns.length) {
      return false;
    }

    const flex = sum(columns.map(col => col.flex));
    const width = sum(columns.map(col => col.width));
    const maxWidth = sum(columns.map(col => col.maxWidth));

    return {
      flex,
      width,
      maxWidth
    };
  }

  return {
    flex: width ? 0 : defaultFlex,
    width: width === 'auto' ? defaultFlex : getFirstDefined(width, minWidth, defaultFlex),
    maxWidth
  };
}

function getStylesForColumn(column, defaultFlex) {
  const { flex, width, maxWidth } = getSizesForColumn(column, defaultFlex);

  return {
    flex: `${flex} 0 auto`,
    width: `${width}px`,
    maxWidth: `${maxWidth}px`
  };
}

const propTypes = {
  defaultFlex: PropTypes.number
};

const useMain = props => {
  PropTypes.checkPropTypes(propTypes, props, 'property', 'useFlexLayout');

  const {
    defaultFlex = 1,
    columns,
    hooks: { getRowProps, getHeaderGroupProps, getHeaderProps, getCellProps }
  } = props;

  const visibleColumns = columns.filter(column => column.visible);

  let sumWidth = 0;
  visibleColumns.forEach(column => {
    const { width, minWidth } = getSizesForColumn(column, defaultFlex);
    if (width) {
      sumWidth += width;
    } else if (minWidth) {
      sumWidth += minWidth;
    } else {
      sumWidth += defaultFlex;
    }
  });

  const rowStyles = {
    style: {
      display: 'flex',
      minWidth: `${sumWidth}px`
    }
  };

  getRowProps.push(() => rowStyles);
  getHeaderGroupProps.push(() => rowStyles);

  getHeaderProps.push(column => ({
    style: {
      boxSizing: 'border-box',
      ...getStylesForColumn(column, defaultFlex)
    }
  }));

  getCellProps.push(cell => {
    return {
      style: {
        ...getStylesForColumn(cell.column, defaultFlex)
      }
    };
  });

  return props;
};

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

export default useFlexLayout;

Edit: removed some useless function parameters and general cleanup - when I was updating this hook a couple of days ago I only tried to make it work to be honest so I didn't read too much into the code.

paolostyle on 5 Aug 2019

👍3

All 17 comments

The flex layout hook is currently out of date. I'll be updating or deprecating the plug-in in the next few alpha releases.
On Aug 2, 2019, 9:32 AM -0600, Codar notifications@github.com, wrote:

V7
I'm not sure if I am doing something wrong with the configuration of the useFlexLayout plugin but using it gives the following error: Cannot read property 'columns' of undefined
I am using the plugin as shown below.
const { getTableProps, headerGroups, rows, prepareRow } = useTable({
columns,
data,
},
useFlexLayout
)
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub, or mute the thread.

tannerlinsley on 2 Aug 2019

import PropTypes from 'prop-types';

function sum(arr) {
  return arr.reduce((prev, curr) => prev + curr, 0);
}

function getFirstDefined(...args) {
  for (let i = 0; i < args.length; i += 1) {
    if (typeof args[i] !== 'undefined') {
      return args[i];
    }
  }
  return undefined;
}

function getSizesForColumn({ columns, id, width, minWidth, maxWidth }, defaultFlex) {
  if (columns) {
    columns = columns
      .filter(col => col.show || col.visible)
      .map(column => getSizesForColumn(column, defaultFlex))
      .filter(Boolean);

    if (!columns.length) {
      return false;
    }

    const flex = sum(columns.map(col => col.flex));
    const width = sum(columns.map(col => col.width));
    const maxWidth = sum(columns.map(col => col.maxWidth));

    return {
      flex,
      width,
      maxWidth
    };
  }

  return {
    flex: width ? 0 : defaultFlex,
    width: width === 'auto' ? defaultFlex : getFirstDefined(width, minWidth, defaultFlex),
    maxWidth
  };
}

function getStylesForColumn(column, defaultFlex) {
  const { flex, width, maxWidth } = getSizesForColumn(column, defaultFlex);

  return {
    flex: `${flex} 0 auto`,
    width: `${width}px`,
    maxWidth: `${maxWidth}px`
  };
}

const propTypes = {
  defaultFlex: PropTypes.number
};

const useMain = props => {
  PropTypes.checkPropTypes(propTypes, props, 'property', 'useFlexLayout');

  const {
    defaultFlex = 1,
    columns,
    hooks: { getRowProps, getHeaderGroupProps, getHeaderProps, getCellProps }
  } = props;

  const visibleColumns = columns.filter(column => column.visible);

  let sumWidth = 0;
  visibleColumns.forEach(column => {
    const { width, minWidth } = getSizesForColumn(column, defaultFlex);
    if (width) {
      sumWidth += width;
    } else if (minWidth) {
      sumWidth += minWidth;
    } else {
      sumWidth += defaultFlex;
    }
  });

  const rowStyles = {
    style: {
      display: 'flex',
      minWidth: `${sumWidth}px`
    }
  };

  getRowProps.push(() => rowStyles);
  getHeaderGroupProps.push(() => rowStyles);

  getHeaderProps.push(column => ({
    style: {
      boxSizing: 'border-box',
      ...getStylesForColumn(column, defaultFlex)
    }
  }));

  getCellProps.push(cell => {
    return {
      style: {
        ...getStylesForColumn(cell.column, defaultFlex)
      }
    };
  });

  return props;
};

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

export default useFlexLayout;

paolostyle on 5 Aug 2019

👍3

This is extremely helpful. And, extremely impressive that it fits into a single code block like that :). Can you imagine how this would even be feasible in v6?! 💯

tannerlinsley on 5 Aug 2019

Oh yeah, definitely, I really love the extensibility that v7 provides, I never actually used v6 but so far I only had rather unpleasant experiences with premade table components for React. With v7 I have to put a bit more work initially but I have absolute control over almost everything, which is just amazing, especially when the project I'm working at has very dynamically changing requirements.

paolostyle on 5 Aug 2019

This should be fixed in master now.

tannerlinsley on 15 Aug 2019

I don't think that this is actually fixed on master.

useFlexLayout still references hooks.columns, and no such value exists, there's certainly no such hook value defined in useTable where the set of hooks are defined.

ggascoigne on 19 Aug 2019

Oh yeah... Sorry, the code for useFlexLayout is supposed to be deprecated for now. If you would like to know how to make the existing hook work, I could give you some direction, but I don't think I'm going to support it as a first-class citizen in this release.

tannerlinsley on 20 Aug 2019

that's fine, the version that paolostyle posted works fine, this was more a comment in response to yours saying that it should be fixed.

Do you think that you should just delete it from the repo if you're not going to fix it?

ggascoigne on 20 Aug 2019

Yes. That's a good idea.

tannerlinsley on 20 Aug 2019

👍1

@tannerlinsley is useFlexLayout still deprecated?

arianitu on 8 Jan 2020

@tannerlinsley is useFlexLayout still deprecated?

@arianitu It's usable in the latest version.

pmorgan3 on 7 Feb 2020

Tanner added a new version a little while ago, I can't speak for him, but I think that it's fair to say that it's no longer deprecated. I'm using the new version quite successfully.

ggascoigne on 7 Feb 2020

So I tried using useFlexlayout, it seems to work okay but I am confused on how to make the table shrink as the container gets smaller?

The examples show scrollbars, but I actually want the table columns/cells to resize as I make the browser window smaller. Usually you use flex-basis with flex-shrink to make this happen, is this possible with useFlexlayout?

arianitu on 9 Feb 2020

I've decided to just implement my own useFlexLayout which utilizes flex-grow, flex-shrink and flex-basis that are defined on the columns, like so:

  const getColumns = () => [
    {
      ...
      id: 'firstName',
      accessor: 'firstName',
      flexBasis: '10rem',
      flexShrink: 2,
      flexGrow: 1,
      ....
    },
    {
      ...
      id: 'Info',
      accessor: 'info',
      flexBasis: '20rem',
      flexShrink: 1,
      flexGrow: 1
      ...
    },

```
export default function useFlexLayout(hooks) {
hooks.getTableProps.push(getTableProps)
hooks.getTableBodyProps.push(getTableBodyProps)
hooks.getRowProps.push(getRowStyles)
hooks.getHeaderGroupProps.push(getRowStyles)
hooks.getHeaderProps.push(getHeaderProps)
hooks.getCellProps.push(getCellProps)
}

useFlexLayout.pluginName = 'useFlexLayout'

const getTableProps = (props, { instance }) => [
props,
{
style: {
display: 'flex',
flexDirection: 'column'
},
},
]

const getTableBodyProps = (props, { instance }) => [
props,
{
style: {},
},
]

const getRowStyles = (props, { instance }) => [
props,
{
style: {
display: 'flex',
},
},
]

const getHeaderProps = (props, { column }) => [
props,
{
style: {
boxSizing: 'border-box',
flex: ${column.flexGrow || 0 } ${column.flexShrink || 1 } ${column.flexBasis || '0px'},
},
},
]

const getCellProps = (props, { cell }) => [
props,
{
style: {
boxSizing: 'border-box',
flex: ${cell.column.flexGrow || 0 } ${cell.column.flexShrink || 1 } ${cell.column.flexBasis || '0px'},
},
},
]
```

arianitu on 9 Feb 2020

Hmm, I've had no problem getting the columns to resize. That said, there are all sorts of constraints in the standard useFlexLayout plugin. It works with useGroupBy and the useResizeColumns plugins, getting the columns layout to work with grouped columns presents a lot of challenges - if you don't use that feature, then it's certainly easier to come up with a different implementation.

ggascoigne on 9 Feb 2020

@ggascoigne are your columns automatically resizing based on the parent container, or are you manually dragging your columns to make them smaller?

In our case, we just want the table to be responsive based on how wide the user has their browser window, maybe we are doing something wrong with the default useFlexLayout?

** Also, we are not using column groups.

arianitu on 9 Feb 2020

take a look at https://github.com/ggascoigne/react-table-example, Note that this is using a build of react-table including at least one fix that's been merged to master and not released yet.

ggascoigne on 9 Feb 2020

Was this page helpful?

0 / 5 - 0 ratings