Using exported TableRow breaks pagination

[Isa Chen]

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>

[Isa Chen]

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>

[Try Ajitiono]

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! 🙇

[Isa Chen]

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!

[Try Ajitiono]

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!