@tcn/ui-table 2.2.0 → 2.3.0

package/src/__stories__/table.stories.tsx

@@ -0,0 +1,423 @@
+import { Meta } from '@storybook/react-vite';
+import React, { useCallback, useState } from 'react';
+
+import {
+  StaticDataSource,
+  StaticDateField,
+  StaticNumberField,
+  StaticStringField,
+} from '@tcn/resource-store';
+import { useSignalValue } from '@tcn/state';
+import { Button } from '@tcn/ui/actions';
+import { Box, HStack, Spacer, VStack } from '@tcn/ui/stacks';
+import { VPanel } from '@tcn/ui/surfaces';
+import { Title } from '@tcn/ui/typography';
+import { GlobalSearch } from '../components/global_search.js';
+import { Table } from '../components/table/table.js';
+import { TableColumn } from '../components/table/table_column.js';
+import { DateFieldFilter } from '../components/table_filter_panel/field_filters/date_field_filter.js';
+import { NumberFieldFilter } from '../components/table_filter_panel/field_filters/number_field_filter.js';
+import { NumberRangeFieldFilter } from '../components/table_filter_panel/field_filters/number_range_field_filter.js';
+import { StringFieldFilter } from '../components/table_filter_panel/field_filters/string_field_filter.js';
+import { TableFilterPanel } from '../components/table_filter_panel/table_filter_panel.js';
+import { TablePager } from '../components/table_pager.js';
+import { DataItem, items, stickyItems } from './sample_data.js';
+import styles from './table.module.css';
+
+const meta: Meta = {
+  title: 'Table',
+};
+
+export function Basic() {
+  const [source] = useState(() => {
+    return new StaticDataSource<DataItem>(items, [
+      new StaticStringField('name', i => i.name),
+      new StaticNumberField('age', i => i.age),
+      new StaticStringField('email', i => i.email),
+      new StaticStringField('city', i => i.city),
+      new StaticStringField('country', i => i.country),
+      new StaticStringField('occupation', i => i.occupation),
+      new StaticStringField('isActive', i => (i.isActive ? 'Yes' : 'No')),
+    ]);
+  });
+
+  return (
+    <Table
+      dataSource={source}
+      onRowClick={item => {
+        alert(`Clicked ${item.name}`);
+      }}
+    >
+      <TableColumn heading="Name" fieldName="name" />
+      <TableColumn heading="Age" fieldName="age" />
+      <TableColumn heading="Email" fieldName="email" />
+      <TableColumn heading="City" fieldName="city" />
+      <TableColumn heading="Country" fieldName="country" />
+      <TableColumn heading="Occupation" fieldName="occupation" />
+      <TableColumn heading="Active" fieldName="isActive" />
+      <div>Other kinds of children don't render</div>
+    </Table>
+  );
+}
+
+export function WithSort() {
+  const [source] = useState(() => {
+    return new StaticDataSource<DataItem>(items, [
+      new StaticStringField('name', i => i.name),
+      new StaticNumberField('age', i => i.age),
+      new StaticStringField('email', i => i.email),
+      new StaticStringField('city', i => i.city),
+      new StaticStringField('country', i => i.country),
+      new StaticStringField('occupation', i => i.occupation),
+      new StaticStringField('isActive', i => (i.isActive ? 'Yes' : 'No')),
+    ]);
+  });
+
+  const currentResults = useSignalValue(source.broadcasts.currentResults);
+
+  return (
+    <Table
+      dataSource={source}
+      onRowClick={item => {
+        alert(`Clicked ${item.name}`);
+      }}
+    >
+      <TableColumn heading="Name" footer="Some Names" fieldName="name" canSort />
+      <TableColumn
+        heading="Age"
+        footer={`Average Age: ${Math.round(currentResults.reduce((sum, i) => sum + i.age, 0) / currentResults.length)}`}
+        fieldName="age"
+        canSort
+        width={120}
+      />
+      <TableColumn heading="Email" fieldName="email" canSort />
+      <TableColumn heading="City" fieldName="city" canSort />
+      <TableColumn heading="Country" fieldName="country" canSort />
+      <TableColumn heading="Occupation" fieldName="occupation" canSort />
+      <TableColumn heading="Active" fieldName="isActive" canSort />
+    </Table>
+  );
+}
+
+export function WithRowHighlighting() {
+  const [source] = useState(() => {
+    return new StaticDataSource<DataItem>(items, [
+      new StaticStringField('name', i => i.name),
+      new StaticNumberField('age', i => i.age),
+      new StaticStringField('id', i => i.id),
+      new StaticStringField('email', i => i.email),
+      new StaticStringField('city', i => i.city),
+      new StaticStringField('country', i => i.country),
+      new StaticStringField('occupation', i => i.occupation),
+      new StaticStringField('isActive', i => (i.isActive ? 'Yes' : 'No')),
+    ]);
+  });
+
+  const [selectedRow, setSelectedRow] = useState<string | null>(null);
+
+  return (
+    <div>
+      <Table
+        dataSource={source}
+        isRowHighlighted={row => {
+          return row.id === selectedRow;
+        }}
+        onRowClick={item => setSelectedRow(item.id)}
+      >
+        <TableColumn heading="Name" fieldName="name" />
+        <TableColumn heading="Age" fieldName="age" />
+        <TableColumn heading="Email" fieldName="email" />
+        <TableColumn heading="City" fieldName="city" />
+        <TableColumn heading="Country" fieldName="country" />
+        <TableColumn heading="Occupation" fieldName="occupation" />
+        <TableColumn heading="Active" fieldName="isActive" />
+      </Table>
+    </div>
+  );
+}
+
+export function ComplexHeadersAndFooters() {
+  const [source] = useState(() => {
+    return new StaticDataSource<DataItem>(items, [
+      new StaticStringField('name', i => i.name),
+      new StaticNumberField('age', i => i.age),
+      new StaticStringField('email', i => i.email),
+      new StaticStringField('city', i => i.city),
+      new StaticStringField('country', i => i.country),
+      new StaticStringField('occupation', i => i.occupation),
+      new StaticStringField('isActive', i => (i.isActive ? 'Yes' : 'No')),
+    ]);
+  });
+
+  return (
+    <Table dataSource={source}>
+      <TableColumn
+        heading={
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+            <span>👤</span>
+            <span>Name</span>
+          </div>
+        }
+        footer={
+          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+            <span>Total:</span>
+            <span>{items.length}</span>
+          </div>
+        }
+        fieldName="name"
+        render={(i: DataItem) => i.name}
+      />
+      <TableColumn
+        heading={
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+            <span>🎂</span>
+            <span>Age</span>
+          </div>
+        }
+        footer={
+          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+            <span>Average:</span>
+            <span>
+              {Math.round(items.reduce((sum, i) => sum + i.age, 0) / items.length)}
+            </span>
+          </div>
+        }
+        fieldName="age"
+        render={(i: DataItem) => i.age}
+      />
+      <TableColumn heading="Email" fieldName="email" render={(i: DataItem) => i.email} />
+      <TableColumn heading="City" fieldName="city" render={(i: DataItem) => i.city} />
+      <TableColumn
+        heading="Country"
+        fieldName="country"
+        render={(i: DataItem) => i.country}
+      />
+      <TableColumn
+        heading="Occupation"
+        fieldName="occupation"
+        render={(i: DataItem) => i.occupation}
+      />
+      <TableColumn
+        heading="Active"
+        fieldName="isActive"
+        render={(i: DataItem) => (i.isActive ? 'Yes' : 'No')}
+      />
+    </Table>
+  );
+}
+
+export function WithStickyActionsColumn() {
+  const [source] = useState(() => {
+    return new StaticDataSource<DataItem>(items, [
+      new StaticStringField('name', i => i.name),
+      new StaticNumberField('age', i => i.age),
+      new StaticStringField('email', i => i.email),
+      new StaticStringField('city', i => i.city),
+      new StaticStringField('country', i => i.country),
+      new StaticStringField('occupation', i => i.occupation),
+      new StaticStringField('isActive', i => (i.isActive ? 'Yes' : 'No')),
+    ]);
+  });
+
+  return (
+    <div style={{ width: '600px', height: '400px' }}>
+      <Table
+        dataSource={source}
+        onRowClick={item => {
+          alert(`Clicked ${item.name}`);
+        }}
+      >
+        <TableColumn heading="Age" fieldName="age" sticky="start" />
+        <TableColumn heading="Name" fieldName="name" />
+        <TableColumn heading="Email" fieldName="email" />
+        <TableColumn heading="City" fieldName="city" />
+        <TableColumn heading="Country" fieldName="country" />
+        <TableColumn heading="Occupation" fieldName="occupation" />
+        <TableColumn heading="Active" fieldName="isActive" />
+        <TableColumn
+          heading="Actions"
+          sticky="end"
+          width={120}
+          render={(item: DataItem) => (
+            <div style={{ display: 'flex', gap: '4px', justifyContent: 'center' }}>
+              <button
+                onClick={e => {
+                  e.stopPropagation();
+                  alert(`Edit ${item.name}`);
+                }}
+                style={{
+                  padding: '4px 8px',
+                  fontSize: '12px',
+                  border: '1px solid #ccc',
+                  borderRadius: '4px',
+                  background: '#f0f0f0',
+                  cursor: 'pointer',
+                }}
+              >
+                Edit
+              </button>
+              <button
+                onClick={e => {
+                  e.stopPropagation();
+                  alert(`Delete ${item.name}`);
+                }}
+                style={{
+                  padding: '4px 8px',
+                  fontSize: '12px',
+                  border: '1px solid #ff6b6b',
+                  borderRadius: '4px',
+                  background: '#ff6b6b',
+                  color: 'white',
+                  cursor: 'pointer',
+                }}
+              >
+                Delete
+              </button>
+            </div>
+          )}
+        />
+      </Table>
+    </div>
+  );
+}
+
+export function WithTableHeaderAndTableFooter() {
+  const [source] = useState(() => {
+    return new StaticDataSource<DataItem>(items, [
+      new StaticStringField('name', i => i.name),
+      new StaticNumberField('age', i => i.age),
+      new StaticStringField('email', i => i.email),
+      new StaticStringField('city', i => i.city),
+      new StaticStringField('country', i => i.country),
+      new StaticStringField('occupation', i => i.occupation),
+      new StaticStringField('isActive', i => (i.isActive ? 'Yes' : 'No')),
+    ]);
+  });
+
+  return (
+    <VPanel>
+      <HStack className={styles.header} padding="8px" vAlign="center">
+        <Title>The Table</Title>
+        <Spacer />
+        <GlobalSearch dataSource={source} />
+      </HStack>
+      <VStack height="flex">
+        <Table
+          dataSource={source}
+          onRowClick={item => {
+            alert(`Clicked ${item.name}`);
+          }}
+        >
+          <TableColumn heading="Name" fieldName="name" />
+          <TableColumn heading="Age" fieldName="age" />
+          <TableColumn heading="Email" fieldName="email" />
+          <TableColumn heading="City" fieldName="city" />
+          <TableColumn heading="Country" fieldName="country" />
+          <TableColumn heading="Occupation" fieldName="occupation" />
+          <TableColumn heading="Active" fieldName="isActive" />
+        </Table>
+      </VStack>
+      <HStack padding="8px">
+        <TablePager dataSource={source} />
+      </HStack>
+    </VPanel>
+  );
+}
+
+export function WithStickyItems() {
+  const [stickyThings, setStickyThings] = useState([...stickyItems]);
+
+  const [source] = useState(() => {
+    const source = new StaticDataSource<DataItem>(items, [
+      new StaticStringField('name', i => i.name),
+      new StaticNumberField('age', i => i.age),
+      new StaticStringField('email', i => i.email),
+      new StaticStringField('city', i => i.city),
+      new StaticStringField('country', i => i.country),
+      new StaticStringField('occupation', i => i.occupation),
+      new StaticStringField('isActive', i => (i.isActive ? 'Yes' : 'No')),
+    ]);
+    source.setPageSize(80);
+    return source;
+  });
+
+  const dismissStickyThing = useCallback((item: DataItem) => {
+    setStickyThings(currentStickyThings =>
+      currentStickyThings.filter(i => i.id !== item.id)
+    );
+  }, []);
+
+  return (
+    <VStack height="100%">
+      <Table dataSource={source} stickyItems={stickyThings}>
+        <TableColumn heading="Name" fieldName="name" sticky="start" />
+        <TableColumn heading="Age" fieldName="age" width={150} />
+        <TableColumn heading="Email" fieldName="email" width={300} />
+        <TableColumn heading="City" fieldName="city" width={300} />
+        <TableColumn heading="Country" fieldName="country" width={200} />
+        <TableColumn heading="Occupation" fieldName="occupation" width={200} />
+        <TableColumn heading="Active" fieldName="isActive" />
+        <TableColumn
+          heading="Actions"
+          sticky="end"
+          width={120}
+          render={(item: DataItem) => {
+            if (stickyThings.includes(item)) {
+              return <Button onClick={() => dismissStickyThing(item)}>x</Button>;
+            }
+            return null;
+          }}
+        />
+      </Table>
+      <TablePager dataSource={source} />
+    </VStack>
+  );
+}
+
+export function WithFilterPanel() {
+  const [source] = useState(() => {
+    const source = new StaticDataSource<DataItem>(items, [
+      new StaticStringField('name', i => i.name),
+      new StaticNumberField('age', i => i.age),
+      new StaticStringField('email', i => i.email),
+      new StaticStringField('city', i => i.city),
+      new StaticDateField('birthdate', i => i.birthdate),
+      new StaticStringField('occupation', i => i.occupation),
+      new StaticStringField('isActive', i => (i.isActive ? 'Yes' : 'No')),
+    ]);
+    source.setPageSize(80);
+    return source;
+  });
+
+  return (
+    <VStack height="100%">
+      <HStack height="100%" vAlign="start" gap="8px">
+        <Box width="300px" height="100%" enableResizeOnEnd>
+          <TableFilterPanel dataSource={source}>
+            <StringFieldFilter fieldName="name" label="Name (string)" />
+            <NumberFieldFilter fieldName="age" label="Age (number)" />
+            <DateFieldFilter fieldName="birthdate" label="Birthdate (date range)" />
+            <NumberRangeFieldFilter fieldName="age" label="Age (number range)" />
+          </TableFilterPanel>
+        </Box>
+        <Table dataSource={source} height="100%" width="flex">
+          <TableColumn heading="Name" fieldName="name" sticky="start" />
+          <TableColumn heading="Age" fieldName="age" width={150} canSort />
+          <TableColumn heading="Email" fieldName="email" width={300} />
+          <TableColumn heading="City" fieldName="city" width={300} />
+          <TableColumn
+            heading="Birthdate"
+            fieldName="birthdate"
+            width={300}
+            render={(i: DataItem) => i.birthdate.toLocaleDateString()}
+          />
+          <TableColumn heading="Occupation" fieldName="occupation" width={200} />
+          <TableColumn heading="Active" fieldName="isActive" />
+        </Table>
+      </HStack>
+      <TablePager dataSource={source} />
+    </VStack>
+  );
+}
+
+export default meta;

package/src/__tests__/sanity.test.ts

@@ -0,0 +1,7 @@
+import { describe, it, expect } from 'vitest';
+
+describe('sanity', () => {
+  it('works', () => {
+    expect(true).toBe(true);
+  });
+});

package/src/components/cells/data_cell.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import cellStyles from './cell.module.css';
+
+export type DataCellProps = {
+  content: React.ReactNode;
+  sticky?: 'start' | 'end';
+  width?: number;
+};
+
+export function DataCell({ content, sticky, width }: DataCellProps) {
+  return (
+    <td className={cellStyles['table-cell']} data-stick-to={sticky}>
+      <div
+        style={{
+          width: `${width}px`,
+          minWidth: `${width}px`,
+          maxWidth: `${width}px`,
+        }}
+      >
+        {content}
+      </div>
+    </td>
+  );
+}

package/src/components/cells/footer_cell.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import cellStyles from './cell.module.css';
+
+export type FooterCellProps = {
+  content: React.ReactNode;
+  sticky?: 'start' | 'end';
+  width?: number;
+};
+
+export function FooterCell({ content, sticky, width }: FooterCellProps) {
+  return (
+    <td className={cellStyles['table-cell']} data-stick-to={sticky}>
+      <div
+        style={{
+          width: `${width}px`,
+          minWidth: `${width}px`,
+          maxWidth: `${width}px`,
+        }}
+      >
+        {content}
+      </div>
+    </td>
+  );
+}

package/src/components/cells/header_cell.tsx

@@ -0,0 +1,77 @@
+import React, { useCallback } from 'react';
+
+import { Box, HStack } from '@tcn/ui/stacks';
+
+import { TwoClassSortDownIcon } from '@tcn/icons/two_class_sort_down_icon.js';
+import { TwoClassSortFilledIcon } from '@tcn/icons/two_class_sort_filled_icon.js';
+import { TwoClassSortUpIcon } from '@tcn/icons/two_class_sort_up_icon.js';
+import { Button } from '@tcn/ui/actions';
+import cellStyles from './cell.module.css';
+
+export type HeaderCellProps = {
+  heading: React.ReactNode;
+  index: number;
+  sticky?: 'start' | 'end';
+  onResize?: (width: number) => void;
+  width?: number;
+  sortMode?: 'none' | 'asc' | 'desc';
+  onSortModeChange?: () => void;
+  canSort?: boolean;
+};
+
+export function HeaderCell({
+  heading,
+  sticky,
+  onResize,
+  width,
+  sortMode,
+  onSortModeChange,
+  canSort,
+}: HeaderCellProps) {
+  const zIndex = sticky != null ? 2 : 1;
+
+  const handleResize = useCallback(
+    (newSize: number) => {
+      onResize?.(Math.max(newSize, 20));
+    },
+    [onResize]
+  );
+
+  return (
+    <th
+      className={cellStyles['table-cell']}
+      data-stick-to={sticky}
+      style={{ width: `${width}px`, zIndex }}
+    >
+      <Box
+        padding="4px 6px"
+        overflow="hidden"
+        minWidth="20px"
+        enableResizeOnEnd
+        onWidthResize={handleResize}
+        style={{ width: `${width}px`, minWidth: '20px' }}
+        onClick={e => e.stopPropagation()}
+        height="30px"
+      >
+        <HStack>
+          <Box className="ellipsis" style={{ alignItems: 'center', display: 'flex' }}>
+            {heading}
+          </Box>
+          <Box width="auto" height="auto">
+            {canSort && (
+              <Button onClick={() => onSortModeChange?.()} hierarchy="tertiary">
+                {sortMode === 'asc' ? (
+                  <TwoClassSortDownIcon />
+                ) : sortMode === 'desc' ? (
+                  <TwoClassSortUpIcon />
+                ) : (
+                  <TwoClassSortFilledIcon />
+                )}
+              </Button>
+            )}
+          </Box>
+        </HStack>
+      </Box>
+    </th>
+  );
+}

package/src/components/cells/sticky_row_data_cell.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import cellStyles from './cell.module.css';
+
+export type StickyRowDataCellProps = {
+  content: React.ReactNode;
+  sticky?: 'start' | 'end';
+  width?: number;
+  top?: number;
+};
+
+export function StickyRowDataCell({
+  content,
+  sticky,
+  width,
+  top,
+}: StickyRowDataCellProps) {
+  return (
+    <td
+      className={cellStyles['sticky-row-table-cell']}
+      data-stick-to={sticky}
+      style={{
+        width: `${width}px`,
+        minWidth: `${width}px`,
+        maxWidth: `${width}px`,
+        top: `${top}px`,
+      }}
+    >
+      <div>{content}</div>
+    </td>
+  );
+}

package/src/components/cells/sticky_row_fill_cell.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import cellStyles from './cell.module.css';
+
+export type StyckyRowFillCellProps = {
+  top?: number;
+};
+
+export function StickyRowFillCell({ top }: StyckyRowFillCellProps) {
+  return (
+    <td
+      className={cellStyles['sticky-row-table-cell']}
+      data-stick-to="start"
+      style={{ top: `${top}px` }}
+    ></td>
+  );
+}

package/src/components/global_search.tsx

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+
+import { DataSource } from '@tcn/resource-store';
+import { useSignalValue } from '@tcn/state';
+import { Input, InputProps } from '@tcn/ui/inputs';
+import { GlobalSearchPresenter } from './global_search_presenter.js';
+
+export interface GlobalSearchOwnProps<T> {
+  dataSource: DataSource<T>;
+}
+
+export type GlobalSearchProps<T> = GlobalSearchOwnProps<T> &
+  Omit<InputProps, 'value' | 'onChange'>;
+
+export function GlobalSearch<T = any>({
+  dataSource,
+  width = 'auto',
+  placeholder = 'Search',
+  ...rest
+}: GlobalSearchProps<T>) {
+  const [presenter] = useState(() => new GlobalSearchPresenter<T>(dataSource));
+  const value = useSignalValue(presenter.broadcasts.value);
+
+  return (
+    <Input
+      width={width}
+      placeholder={placeholder}
+      value={value ?? ''}
+      onChange={e => presenter.setValue(e)}
+      {...rest}
+    />
+  );
+}

package/src/components/global_search_presenter.ts

@@ -0,0 +1,24 @@
+import { DataSource } from '@tcn/resource-store';
+import { Signal } from '@tcn/state';
+
+export class GlobalSearchPresenter<T = unknown> {
+  private _dataSource: DataSource<T>;
+  private _value = new Signal<string | null>(null);
+
+  private _broadcasts = {
+    value: this._value.broadcast,
+  };
+
+  constructor(dataSource: DataSource<T>) {
+    this._dataSource = dataSource;
+  }
+
+  get broadcasts() {
+    return this._broadcasts;
+  }
+
+  async setValue(value: string | null) {
+    this._dataSource.setGlobalSearch(value ?? '');
+    this._value.set(value ?? '');
+  }
+}

package/{dist → src}/components/table/table.module.css

@@ -1,7 +1,8 @@
 .table-body-wrapper {
   box-shadow: var(--table-box-shadow, inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5));
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
-    Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
+    "Open Sans", "Helvetica Neue", sans-serif;
   color: #333;
 }