react-science/stories/components/table.stories.tsx at 9f49804385e0b16c6f07897d11b559c1adfac092 · zakodium-oss/react-science · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
import styled from '@emotion/styled';
import type { Meta, StoryObj } from '@storybook/react-vite';
import type { ComponentType } from 'react';

import type { GetTdProps, TableProps } from '../../src/components/index.js';
import { Table, TableRowTr } from '../../src/components/index.js';
import { table } from '../data/data.js';

import { columns, columnsNativeMeta } from './table_columns.js';

type TableRecord = (typeof table)[number];

type Story = StoryObj<TableProps<TableRecord>>;

const getTdProps: GetTdProps<TableRecord> = () => ({
  style: {
    verticalAlign: 'middle',
  },
});

export default {
  title: 'Components / Table',
  component: Table,
  decorators: [
    (Story: ComponentType) => (
      <div style={{ margin: 12, height: '100%', overflowY: 'auto' }}>
        <Story />
      </div>
    ),
  ],
  args: {
    noHeader: false,
    virtualizeRows: false,
    bordered: false,
    compact: false,
    interactive: false,
    striped: false,
    stickyHeader: false,
    getTdProps,
    data: table,
    columns,
  },
  argTypes: {
    estimatedRowHeight: {
      table: {
        disable: true,
      },
    },
    data: {
      table: {
        disable: true,
      },
    },
    columns: {
      table: {
        disable: true,
      },
    },
    getTdProps: {
      table: {
        disable: true,
      },
    },
  },
} satisfies Meta<TableProps<TableRecord>>;

export const Control = {} satisfies Story;

export const CustomTrRender = {
  args: {
    renderRowTr: (trProps, row) => (
      <TableRowTr
        row={row}
        trProps={{ ...trProps, style: { backgroundColor: row.original.color } }}
      />
    ),
  },
} satisfies Story;

export const CustomHeaderCellRender = {
  args: {
    tableProps: {
      style: {
        tableLayout: 'fixed',
        width: '100%',
      },
    },
    renderHeaderCell: (thProps, header) => {
      const backgroundColor = header.column.columnDef.meta?.color;
      const width = header.column.columnDef.meta?.width;
      return (
        <th {...thProps} style={{ ...thProps.style, backgroundColor, width }} />
      );
    },
  },
} satisfies Story;

export const StyledTable = {
  render: (props: TableProps<TableRecord>) => {
    const StyledTableComponent = styled(Table<TableRecord>)`
      border: 1px solid red;
    `;
    return <StyledTableComponent {...props} />;
  },
} satisfies Story;

export const WithTdStyle = {
  args: { tdStyle: { backgroundColor: '#eee' } },
} satisfies Story;

export const Virtualized: Story = {
  args: { virtualizeRows: true, estimatedRowHeight: () => 172 },
} satisfies Story;

export const WithMetaThAndTdStyle: Story = {
  args: {
    data: table.slice(0, 1),
    columns: columnsNativeMeta,
  },
};

export const EmptyTable: Story = {
  args: {
    data: [],
    emptyContent: 'No molecules',
    emptyIcon: <span aria-hidden="true">🪹</span>,
  },
};