Merge pull request #1241 from vtex/feat/table-virtualization

feat(simple-table): add simple table virtualization

Author: lucasaarcoverde

packages/components/package.json

@@ -63,6 +63,8 @@
     "@tanstack/react-table": "8.10.7",
     "@vtex/shoreline-icons": "^0.2.1",
     "@vtex/shoreline-utils": "^0.4.0",
-    "react-hot-toast": "2.4.1"
+    "react-hot-toast": "2.4.1",
+    "react-virtual": "^2.10.4",
+    "@tanstack/react-virtual": "3.0.0-beta.68"
   }
 }

packages/components/src/index.ts

@@ -4,6 +4,7 @@ export * from './skeleton'
 export * from './tab'
 export * from './tooltip'
 export * from './filter'
+export * from './virtual'
 export * from './scroll-area'
 export * from './combobox'
 export * from './select'

packages/components/src/simple-table/simple-table-header.tsx

@@ -0,0 +1,47 @@
+import type { Ref } from 'react'
+import React from 'react'
+import { TableHeader, TableHeaderCell, TableRow } from '../table'
+import type { TableHeaderProps } from '../table'
+import { flexRender } from '@tanstack/react-table'
+import type { HeaderGroup } from '@tanstack/react-table'
+import { IconArrowDown, IconArrowUp } from '@vtex/shoreline-icons'
+import { forwardRef } from '@vtex/shoreline-utils'
+
+export const SimpleTableHeader = forwardRef(function SimpleTableHeader<T>(
+  props: SimpleTableRowProps<T>,
+  ref: Ref<HTMLDivElement>
+) {
+  const { headers, children, ...otherProps } = props
+
+  return (
+    <TableHeader {...otherProps} ref={ref}>
+      {headers.map((headerGroup) => (
+        <TableRow key={headerGroup.id}>
+          {headerGroup.headers.map((header) => (
+            <TableHeaderCell
+              key={header.id}
+              onClick={header.column.getToggleSortingHandler()}
+              sortable={header.column.getCanSort()}
+            >
+              {header.isPlaceholder
+                ? null
+                : flexRender(
+                    header.column.columnDef.header,
+                    header.getContext()
+                  )}
+              {header.column.getIsSorted() === 'asc' ? (
+                <IconArrowUp />
+              ) : header.column.getIsSorted() === 'desc' ? (
+                <IconArrowDown />
+              ) : null}
+            </TableHeaderCell>
+          ))}
+        </TableRow>
+      ))}
+    </TableHeader>
+  )
+})
+
+export interface SimpleTableRowProps<T> extends TableHeaderProps {
+  headers: Array<HeaderGroup<T>>
+}

packages/components/src/simple-table/simple-table-row.tsx

@@ -0,0 +1,94 @@
+import type { ReactNode, Ref } from 'react'
+import React, { Fragment } from 'react'
+import { TableCell, TableRow, type TableRowProps } from '../table'
+import { flexRender, type Row } from '@tanstack/react-table'
+import type { NavigationTarget } from '../link-box/link-box-utils'
+import { Clickable } from '../clickable'
+import { LinkBox } from '../link-box'
+import { forwardRef } from '@vtex/shoreline-utils'
+
+export const SimpleTableRow = forwardRef(function SimpleTableRow<T>(
+  props: SimpleTableRowProps<T>,
+  ref: Ref<HTMLDivElement>
+) {
+  const { row, id, rowClick, renderDetail, children, ...otherProps } = props
+
+  return (
+    <Fragment key={id}>
+      <TableRow
+        ref={ref}
+        selected={row.getIsSelected()}
+        expanded={row.getIsExpanded()}
+        {...otherProps}
+      >
+        {row.getVisibleCells().map((cell) => {
+          if (rowClick) {
+            if (rowClick.type === 'action') {
+              const { onClick } = rowClick
+
+              return (
+                <Clickable onClick={() => onClick(row)} key={cell.id} asChild>
+                  <TableCell>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                </Clickable>
+              )
+            }
+
+            if (rowClick.type === 'link') {
+              const { getHref, target } = rowClick
+
+              return (
+                <LinkBox
+                  href={getHref(row)}
+                  target={target}
+                  key={cell.id}
+                  asChild
+                >
+                  <TableCell>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                </LinkBox>
+              )
+            }
+          }
+
+          return (
+            <TableCell key={cell.id}>
+              {flexRender(cell.column.columnDef.cell, cell.getContext())}
+            </TableCell>
+          )
+        })}
+      </TableRow>
+      {row.getIsExpanded() && (
+        <TableRow data-sl-detail-row selected={row.getIsSelected()}>
+          <TableCell
+            style={{
+              gridColumn: `1 / span ${row.getVisibleCells().length}`,
+            }}
+          >
+            {renderDetail?.(row)}
+          </TableCell>
+        </TableRow>
+      )}
+    </Fragment>
+  )
+})
+
+export interface SimpleTableRowProps<T> extends TableRowProps {
+  row: Row<T>
+  rowClick?: RowClick<T>
+  renderDetail?: (row: Row<T>) => ReactNode
+}
+
+export type RowClick<T> =
+  | {
+      type: 'link'
+      getHref: (row: Row<T>) => string
+      target?: NavigationTarget | undefined
+    }
+  | {
+      type: 'action'
+      onClick: (row: Row<T>) => void
+    }
+  | undefined

packages/components/src/simple-table/simple-table.css

@@ -1,6 +1,11 @@
 @layer sl-components {
   [data-sl-simple-table] {
     width: 100%;
+
+    &[data-virtualize='true'] {
+      height: 500px;
+      overflow-y: auto;
+    }
   }
 
   [data-sl-detail-row] {