react-table 7.0.0-beta

useFlexLayout.js

import PropTypes from 'prop-types';

const propTypes = {};

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

useFlexLayout.pluginName = 'useFlexLayout';

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

    const {
        hooks: {getRowProps, getHeaderGroupProps, getHeaderProps, getCellProps},
    } = instance;

    const rowStyles = {
        style: {
            display: 'flex',
        },
    };

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

    const cellStyles = {
        display: 'inline-block',
        boxSizing: 'border-box',
    };

    getHeaderProps.push(header => ({
        style: {
            ...cellStyles,
            flexBasis: `${header.width}px`,
            flexGrow: header.flexGrow ? 1 : 0,
            flexShrink: header.flexShrink ? 1 : 0,
        }
    }));

    getCellProps.push(cell => ({
            style: {
                ...cellStyles,
                flexBasis: `${cell.column.width}px`,
                flexGrow: cell.column.flexGrow ? 1 : 0,
                flexShrink: cell.column.flexShrink ? 1 : 0,
            },
        })
    );

    return instance;
};