Create multi header easier ? about react-base-table HOT 9 CLOSED

Could you share a complete example ？ thanks a lot.
Maybe a complete and useable example in the document will be friendly for user.

from react-base-table.

I’d say BaseTable is not recommended to be used directly, you could implement a easier version on you own table component based on the current api, I’ll share our internal implementation of column groups later

from react-base-table.

BTW, here is our API for that

  /**
   * The groups for the columns
   */
  columnGroups: PropTypes.arrayOf(
    PropTypes.shape({
      key: PropTypes.string.isRequired,
      title: PropTypes.string.isRequired,
      parentKey: PropTypes.string,
    })
  ),

from react-base-table.

I'm working on the new demo system right now #21 , will do after that

from react-base-table.

@nihgwu Any chance you might be able to share the demo for column groups? I'd find it really helpful

from react-base-table.

@eokoneyo I didn't check the implementation but looks good #252 (comment)

from react-base-table.

I also saw that, I'm just a little apprehensive that react-base-table isn't used as a dependency especially considering the project name.

from react-base-table.

BTW, here is our API for that

  /**
   * The groups for the columns
   */
  columnGroups: PropTypes.arrayOf(
    PropTypes.shape({
      key: PropTypes.string.isRequired,
      title: PropTypes.string.isRequired,
      parentKey: PropTypes.string,
    })
  ),

@nihgwu I believe this API doesn't exist anymore? I couldn't find it in any relevant place in the codebase.
Also the example in the documentation looks outdated, because now there's not such prop as cells in headerRenderer
What is the type of object headerRenderer expected to return in order to have grouped header? A nested array of React.Nodes?

from react-base-table.

Ok, I think I've figured it out!
For ones of you (@eokoneyo , @NexxLuo ) who are struggling with docs and can't find a working example here's a Sandbox with 2 options for headerRenderer.
Note that there are 2 of them with different signatures (one in <BaseTable > and one in <Column> components).
The headerHeight prop in <BaseTable> is the one that defines the number of levels in header, so if it's a plain number - then it's a regular header, if it's an array of numbers, then it's a multi header.

https://codesandbox.io/s/react-base-table-multi-header-4xh7d?file=/src/App.tsx

from react-base-table.