useFlexLayout and Footer not receiving correct props

[tastypackets]

Hello,

I wanted to open this more of as a discussion at first in case I'm just misusing this. 😄

Currently useFlexLayout will generate some props for the header and body when the get props function is called, so they render like a table in a flex layout. However it does not do this for the foot rows and cells. Checking the docks it isn't even mentioned the getFooterGroupProps() or getFooterProps() on the useFlexLayout API. The only way I was able to get the proper flex props was by calling them the header props getter instead. Is this intentional since the footers are reversed headers? Would it make sense to maybe map these even if they are simply the same thing?

For example this does not get flex layout props:

          <div className="tfoot">
            {footerGroups.map((footerGroup) => (
              <div className="tr" {...footerGroup.getFooterGroupProps()}>
                {footerGroup.headers.map((column) => (
                  <div className="td" {...column.getFooterProps()}>
                    {column.render("Footer")}
                  </div>
                ))}
              </div>
            ))}
          </div>

Generates:

<div class="tr"><div class="td" colspan="1">
  <div class="td" colspan="1">Test</div>
</div>

Instead calling the header props does get me the flex props:

          <div className="tfoot">
            {footerGroups.map((footerGroup) => (
              <div className="tr" {...footerGroup.getHeaderGroupProps()}>
                {footerGroup.headers.map((column) => (
                  <div className="td" {...column.getHeaderProps()}>
                    {column.render("Footer")}
                  </div>
                ))}
              </div>
            ))}
          </div>

Generates:

<div class="tr" role="row" style="display: flex; flex: 1 0 auto; min-width: 0px;">
  <div class="td" colspan="1" role="columnheader" style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;">Test</div>
</div>

[carsondarling]

@tastypackets I ran into the same issue with useBlockLayout. It appears that both of these hooks ignore the footer entirely. I'm working on a PR that will fix this issue, but in the meantime, you can workaround it with a custom hook.

For useBlockLayout, add the following hook in your call to useTable

hooks => {
  hooks.getFooterGroupProps.push((props, { instance }) => [
    props,
    {
      style: {
        display: 'flex',
        width: `${instance.totalColumnsWidth}px`,
      },
    },
  ]);

  hooks.getFooterProps.push((props, { column }) => [
    props,
    {
      style: {
        display: 'inline-block',
        boxSizing: 'border-box',
        width: `${column.totalWidth}px`,
      },
    },
  ]);
},

[carsondarling]

@tastypackets The PR is available here: #2430

[carsondarling]

This PR is merged and available in [email protected]