feat: table virtualization

[tewarig]

Description

Changes

Additional Information

dev checklist -
[ x ] vtable height be changed
[ x ] check why check box look weird ?
[ x ] need to make row similar to normal table
[ x ] should check the space of table.
[ x ] vtable should be aligned as normal table.
[ x ] hover actions
[ x ] sticky column
[ x ] table header
[ x ] fix ts error
[ x ] unified styles for virtualized table
[ x ] add tests

Component Checklist

• Update Component Status Page
• Perform Manual Testing in Other Browsers
• Add KitchenSink Story
• Add Interaction Tests (if applicable)
• Add changeset

[saurabhdaware]

This is what I was thinking-

So structurally it stays similar to our current API with few changes here and there

<Table
  tableData={tableData}
>
{(tableData) => (
  <TableVirtualizedContainer tableData={tableData}>
    <TableHeader>
      <TableHeaderRow>
      </TableHeaderRow>
    </TableHeader>
  
    <TableBody>
      {(tableItem, index) => <TableRow key={index} item={tableItem} />}
    </TableBody>
  </TableVirtualizedContainer>
)}
</Table>

OR

if we can skip the Table component and do this -

<TableVirtualized
  tableData={tableData}
>
{(tableData) => (
  <TableHeader>
    <TableHeaderRow>
    </TableHeaderRow>
  </TableHeader>

  <TableBody>
    {(tableItem, index) => <TableRow key={index} item={tableItem} />}
  </TableBody>
)}
</TableVirtualized>

[saurabhdaware]

Should we have headerHeight internally defined? a bit confusing that index 0 here is header but index 0 in other places would be row item.

Since we know headerHeight, we can define it internally and leave rowHeight for consumers to define.

[saurabhdaware]

is this working? wouldn't it lead to ...false in some scenarios and try to destructure a boolean

[tewarig]

yes it is working... isVirtualized will be false in case of normal table

[saurabhdaware]

You don't have to destructure here right? I'm guessing it can just be ....(isVirtualized ? getTableBodyStyles() : {})

[saurabhdaware]

So in virtualized version, we add tableBodyStyles on table component?

Is there any harm if we always use tableBodyStyles here? even in non-virtualized table?

[tewarig]

nope, since structure is different i don't see any harm . but still we should not add any other styles which are not being used.

[saurabhdaware]

lets discuss this

[saurabhdaware]

we can internally handle this without taking from consumer

[tewarig]

done

[saurabhdaware]

We can remove ref and use height and calculate the width height of table node itself

<Box ref={parentRef}>
  <Table parentRef={parentRef} />
</Box>

<Table height="" />

[tewarig]

done 👍🏻

[saurabhdaware]

Check with footer once

[tewarig]

checked VirtualizedTable does not support footer. we can only pass header and footer. also can't think of a case where we will be using VirtualizedTable with footer.