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:

react-bs-datatable/src/__stories__/00-Uncontrolled.stories.tsx

Lines 374 to 395 in b4b4314

	<TableBody<StoryColumnType>>
	{(rows) =>
	rows.length === 0 ? (
	<EmptyTablePlaceholder />
	) : (
	rows.map((rowData, rowIdx) =>
	rowData.status === 'unknown' ? (
	<tr key={rowData.username}>
	<td colSpan={headers.length}>Row status unknown</td>
	</tr>
	) : (
	<TableRow
	key={rowData.username}
	rowData={rowData}
	rowIdx={rowIdx}
	onRowClick={onRowClick}
	/>
	)
	)
	)
	}
	</TableBody>

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 #195 -- can't promise it will be done in the short term, but I'll definitely keep that in mind.

Thanks for the response!