Using exported TableRow breaks pagination

[isabellachen]

By using the exported TableRow component as per your example, the pagination no longer works. This is kind of expected I suppose since it is doing a direct .map() on the data set. Am wondering if there is a way to get the paginated data when mapping? Basically TABLE_BODY is the entire data set and not the paginated data set.

I need to put a Popover/ Tooltip on the entire row.

Code Sandbox

    <Table>
        <TableHeader />
        <TableBody>
          {TABLE_BODY.map((user, idx) => {
            return <TableRow rowData={user} rowIdx={idx} />;
          })}
        </TableBody>
      </Table>

[isabellachen]

Putting this here for future users since I didn't find any example in the docs: The solution is to use the children property.

 <Table>
        <TableHeader />
        <TableBody
          children={(rows) => {
            return rows.map((data, idx) => {
              return <TableRow rowData={data} rowIdx={idx} />;
            });
          }}
        />
      </Table>

[imballinst]

hi @isabellachen, sorry you stumbled upon this issue and apologies for the late reply. There is this example in the Storybook for Composed table rows:

https://github.com/imballinst/react-bs-datatable/blob/b4b4314fd28dfab14806c96faa75bcf8af86e9a7/src/__stories__/00-Uncontrolled.stories.tsx#L374-L395

So, yeah, alternatively from your solution, you can indeed also do the JSX approach (following the Storybook example):

<Table>
  <TableHeader />
  <TableBody>
    {(rows) => {
      return rows.map((data, idx) => {
        return <TableRow rowData={data} rowIdx={idx} />;
      });
    }}
  </TableBody>
</Table>

I know the Storybook stories are messy, but I'd like to also know from your perspective, is there any particular area that you'd like to improve, documentation wise? Thanks! 🙇

[isabellachen]

I guess it was confusing because when I went to composed table rows section under "Docs" tab, and clicked "show code" the code in StoryBook isn't the same as the 00-Uncontrolled.stories.tsx

Tbh it wasn't too hard reading the source code to figure out how to do it. Thanks for the prompt reply!

[imballinst]

Yeah, I think that's a valid feedback. I'll track them in https://github.com/imballinst/react-bs-datatable/issues/195 -- can't promise it will be done in the short term, but I'll definitely keep that in mind.

Thanks for the response!