feat: Table fill level

src/components/table/FillerRows.tsx

@@ -0,0 +1,92 @@
+import type { Row } from '@tanstack/react-table'
+import type { VirtualItem } from '@tanstack/react-virtual'
+
+import { type TableFillLevel } from './Table'
+import { Td } from './Td'
+import { Tr } from './Tr'
+
+function FillerRow({
+  columns,
+  height,
+  index,
+  stickyColumn,
+  selectable,
+  fillLevel,
+  ...props
+}: {
+  columns: unknown[]
+  height: number
+  index: number
+  stickyColumn: boolean
+  selectable?: boolean
+  fillLevel: TableFillLevel
+}) {
+  return (
+    <Tr
+      aria-hidden="true"
+      $raised={index % 2 === 1}
+      $selected={false}
+      $selectable={selectable}
+      $fillLevel={fillLevel}
+    >
+      <Td
+        aria-hidden="true"
+        $fillLevel={fillLevel}
+        $stickyColumn={stickyColumn}
+        style={{
+          height,
+          minHeight: height,
+          maxHeight: height,
+          padding: 0,
+          gridColumn: '1 / -1',
+        }}
+        colSpan={columns.length}
+        $truncateColumn={false}
+        $center={false}
+        {...props}
+      />
+    </Tr>
+  )
+}
+
+export function FillerRows({
+  rows,
+  height,
+  position,
+  fillLevel,
+  ...props
+}: {
+  rows: Row<unknown>[] | VirtualItem[]
+  columns: unknown[]
+  height: number
+  position: 'top' | 'bottom'
+  stickyColumn: boolean
+  clickable?: boolean
+  selectable?: boolean
+  fillLevel: TableFillLevel
+}) {
+  return (
+    <>
+      <FillerRow
+        height={position === 'top' ? 0 : height}
+        index={
+          position === 'top'
+            ? rows[0].index - 2
+            : rows[rows.length - 1].index + 1
+        }
+        fillLevel={fillLevel}
+        {...props}
+      />
+      <FillerRow
+        height={position === 'top' ? height : 0}
+        index={
+          position === 'top'
+            ? rows[0].index - 1
+            : rows[rows.length - 1].index + 2
+        }
+        fillLevel={fillLevel}
+        {...props}
+      />
+    </>
+  )
+}

src/components/table/SortIndicator.tsx

@@ -0,0 +1,28 @@
+import type { SortDirection } from '@tanstack/react-table'
+
+import ArrowRightIcon from '../icons/ArrowRightIcon'
+
+export function SortIndicator({
+  direction = false,
+}: {
+  direction: false | SortDirection
+}) {
+  switch (direction) {
+    case 'asc':
+      return (
+        <ArrowRightIcon
+          size={12}
+          transform="rotate(-90deg)"
+        />
+      )
+    case 'desc':
+      return (
+        <ArrowRightIcon
+          size={12}
+          transform="rotate(90deg)"
+        />
+      )
+    case false:
+      return null
+  }
+}

src/components/table/T.tsx

@@ -0,0 +1,13 @@
+import styled from 'styled-components'
+
+export const T = styled.table<{ $gridTemplateColumns: string }>(
+  ({ theme, $gridTemplateColumns }) => ({
+    gridTemplateColumns: $gridTemplateColumns,
+    borderSpacing: 0,
+    display: 'grid',
+    borderCollapse: 'collapse',
+    minWidth: '100%',
+    width: '100%',
+    ...theme.partials.text.body2LooseLineHeight,
+  })
+)