Skip to content

Commit ff426cd

Browse files
rwieruchrwieruch
committed
footer
1 parent d2c5a2f commit ff426cd

File tree

12 files changed

+117
-107
lines changed

12 files changed

+117
-107
lines changed

‎.storybook/stories/Themes/Libraries/chakra-ui/native.js

Lines changed: 18 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import * as React from 'react';
22

33
import { CompactTable } from '@table-library/react-table-library/compact';
4-
import { Header, HeaderRow, HeaderCell } from '@table-library/react-table-library/table';
54
import { useTheme } from '@table-library/react-table-library/theme';
65
import { DEFAULT_OPTIONS, getTheme } from '@table-library/react-table-library/themes/chakra-ui';
76
import { Box } from '@chakra-ui/react';
@@ -30,7 +29,7 @@ const Component = () => {
3029
const theme = useTheme(mantineTheme);
3130

3231
const COLUMNS = [
33-
{ label: 'Task', renderCell: (item) => item.name },
32+
{ label: 'Task', renderCell: (item) => item.name, footer: hasFooter ? 'Task' : null },
3433
{
3534
label: 'Deadline',
3635
renderCell: (item) =>
@@ -39,30 +38,24 @@ const Component = () => {
3938
month: '2-digit',
4039
day: '2-digit',
4140
}),
41+
footer: hasFooter ? 'Deadline' : null,
4242
},
43-
{ label: 'Type', renderCell: (item) => item.type },
43+
{ label: 'Type', renderCell: (item) => item.type, footer: hasFooter ? 'Type' : null },
4444
{
4545
label: 'Complete',
4646
renderCell: (item) => item.isComplete.toString(),
47+
footer: hasFooter ? 'Complete' : null,
48+
},
49+
{
50+
label: 'Tasks',
51+
renderCell: (item) => item.nodes?.length,
52+
footer: hasFooter ? 'Tasks' : null,
4753
},
48-
{ label: 'Tasks', renderCell: (item) => item.nodes?.length },
4954
];
5055

5156
const TABLE_OPTIONS = {
5257
renderAfterTable: () => (
5358
<>
54-
{hasFooter && (
55-
<Header>
56-
<HeaderRow className="tr-footer">
57-
<HeaderCell>Task</HeaderCell>
58-
<HeaderCell>Deadline</HeaderCell>
59-
<HeaderCell>Type</HeaderCell>
60-
<HeaderCell>Complete</HeaderCell>
61-
<HeaderCell>Tasks</HeaderCell>
62-
</HeaderRow>
63-
</Header>
64-
)}
65-
6659
{caption && (
6760
<div className="caption-container">
6861
<caption>{caption}</caption>
@@ -122,7 +115,6 @@ const code = `
122115
import * as React from 'react';
123116
124117
import { CompactTable } from '@table-library/react-table-library/compact';
125-
import { Header, HeaderRow, HeaderCell } from '@table-library/react-table-library/table';
126118
import { useTheme } from '@table-library/react-table-library/theme';
127119
import { DEFAULT_OPTIONS, getTheme } from '@table-library/react-table-library/themes/chakra-ui';
128120
import { Box } from '@chakra-ui/react';
@@ -151,7 +143,7 @@ const Component = () => {
151143
const theme = useTheme(mantineTheme);
152144
153145
const COLUMNS = [
154-
{ label: 'Task', renderCell: (item) => item.name },
146+
{ label: 'Task', renderCell: (item) => item.name, footer: hasFooter ? 'Task' : null },
155147
{
156148
label: 'Deadline',
157149
renderCell: (item) =>
@@ -160,30 +152,24 @@ const Component = () => {
160152
month: '2-digit',
161153
day: '2-digit',
162154
}),
155+
footer: hasFooter ? 'Deadline' : null,
163156
},
164-
{ label: 'Type', renderCell: (item) => item.type },
157+
{ label: 'Type', renderCell: (item) => item.type, footer: hasFooter ? 'Type' : null },
165158
{
166159
label: 'Complete',
167160
renderCell: (item) => item.isComplete.toString(),
161+
footer: hasFooter ? 'Complete' : null,
162+
},
163+
{
164+
label: 'Tasks',
165+
renderCell: (item) => item.nodes?.length,
166+
footer: hasFooter ? 'Tasks' : null,
168167
},
169-
{ label: 'Tasks', renderCell: (item) => item.nodes?.length },
170168
];
171169
172170
const TABLE_OPTIONS = {
173171
renderAfterTable: () => (
174172
<>
175-
{hasFooter && (
176-
<Header>
177-
<HeaderRow className="tr-footer">
178-
<HeaderCell>Task</HeaderCell>
179-
<HeaderCell>Deadline</HeaderCell>
180-
<HeaderCell>Type</HeaderCell>
181-
<HeaderCell>Complete</HeaderCell>
182-
<HeaderCell>Tasks</HeaderCell>
183-
</HeaderRow>
184-
</Header>
185-
)}
186-
187173
{caption && (
188174
<div className="caption-container">
189175
<caption>{caption}</caption>

‎.storybook/stories/Themes/Libraries/mantine/native.js

Lines changed: 19 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import * as React from 'react';
22

33
import { CompactTable } from '@table-library/react-table-library/compact';
4-
import { Header, HeaderRow, HeaderCell } from '@table-library/react-table-library/table';
54
import { useTheme } from '@table-library/react-table-library/theme';
65
import { DEFAULT_OPTIONS, getTheme } from '@table-library/react-table-library/themes/mantine';
76

@@ -31,7 +30,7 @@ const Component = () => {
3130
const theme = useTheme(mantineTheme);
3231

3332
const COLUMNS = [
34-
{ label: 'Task', renderCell: (item) => item.name },
33+
{ label: 'Task', renderCell: (item) => item.name, footer: hasFooter ? 'Task' : null },
3534
{
3635
label: 'Deadline',
3736
renderCell: (item) =>
@@ -40,30 +39,24 @@ const Component = () => {
4039
month: '2-digit',
4140
day: '2-digit',
4241
}),
42+
footer: hasFooter ? 'Deadline' : null,
4343
},
44-
{ label: 'Type', renderCell: (item) => item.type },
44+
{ label: 'Type', renderCell: (item) => item.type, footer: hasFooter ? 'Type' : null },
4545
{
4646
label: 'Complete',
4747
renderCell: (item) => item.isComplete.toString(),
48+
footer: hasFooter ? 'Complete' : null,
49+
},
50+
{
51+
label: 'Tasks',
52+
renderCell: (item) => item.nodes?.length,
53+
footer: hasFooter ? 'Tasks' : null,
4854
},
49-
{ label: 'Tasks', renderCell: (item) => item.nodes?.length },
5055
];
5156

5257
const TABLE_OPTIONS = {
5358
renderAfterTable: () => (
5459
<>
55-
{hasFooter && (
56-
<Header>
57-
<HeaderRow className="tr-footer">
58-
<HeaderCell>Task</HeaderCell>
59-
<HeaderCell>Deadline</HeaderCell>
60-
<HeaderCell>Type</HeaderCell>
61-
<HeaderCell>Complete</HeaderCell>
62-
<HeaderCell>Tasks</HeaderCell>
63-
</HeaderRow>
64-
</Header>
65-
)}
66-
6760
{caption && (
6861
<div className="caption-container">
6962
<caption>{caption}</caption>
@@ -130,11 +123,7 @@ import * as React from 'react';
130123
131124
import { CompactTable } from '@table-library/react-table-library/compact';
132125
import { useTheme } from '@table-library/react-table-library/theme';
133-
import {
134-
DEFAULT_OPTIONS,
135-
getTheme,
136-
} from '@table-library/react-table-library/themes/mantine';
137-
import { Header, HeaderRow, HeaderCell } from '@table-library/react-table-library/table';
126+
import { DEFAULT_OPTIONS, getTheme } from '@table-library/react-table-library/themes/mantine';
138127
139128
import { DocumentationSee } from '../../../documentation';
140129
import { nodes } from '../../../data';
@@ -162,7 +151,7 @@ const Component = () => {
162151
const theme = useTheme(mantineTheme);
163152
164153
const COLUMNS = [
165-
{ label: 'Task', renderCell: (item) => item.name },
154+
{ label: 'Task', renderCell: (item) => item.name, footer: hasFooter ? 'Task' : null },
166155
{
167156
label: 'Deadline',
168157
renderCell: (item) =>
@@ -171,30 +160,24 @@ const Component = () => {
171160
month: '2-digit',
172161
day: '2-digit',
173162
}),
163+
footer: hasFooter ? 'Deadline' : null,
174164
},
175-
{ label: 'Type', renderCell: (item) => item.type },
165+
{ label: 'Type', renderCell: (item) => item.type, footer: hasFooter ? 'Type' : null },
176166
{
177167
label: 'Complete',
178168
renderCell: (item) => item.isComplete.toString(),
169+
footer: hasFooter ? 'Complete' : null,
170+
},
171+
{
172+
label: 'Tasks',
173+
renderCell: (item) => item.nodes?.length,
174+
footer: hasFooter ? 'Tasks' : null,
179175
},
180-
{ label: 'Tasks', renderCell: (item) => item.nodes?.length },
181176
];
182177
183178
const TABLE_OPTIONS = {
184179
renderAfterTable: () => (
185180
<>
186-
{hasFooter && (
187-
<Header>
188-
<HeaderRow className="tr-footer">
189-
<HeaderCell>Task</HeaderCell>
190-
<HeaderCell>Deadline</HeaderCell>
191-
<HeaderCell>Type</HeaderCell>
192-
<HeaderCell>Complete</HeaderCell>
193-
<HeaderCell>Tasks</HeaderCell>
194-
</HeaderRow>
195-
</Header>
196-
)}
197-
198181
{caption && (
199182
<div className="caption-container">
200183
<caption>{caption}</caption>

‎.storybook/stories/Themes/Libraries/material-ui/native.js

Lines changed: 18 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import * as React from 'react';
22

33
import { CompactTable } from '@table-library/react-table-library/compact';
4-
import { Header, HeaderRow, HeaderCell } from '@table-library/react-table-library/table';
54
import { useTheme } from '@table-library/react-table-library/theme';
65
import { DEFAULT_OPTIONS, getTheme } from '@table-library/react-table-library/themes/material-ui';
76

@@ -31,7 +30,7 @@ const Component = () => {
3130
const theme = useTheme(materialTheme);
3231

3332
const COLUMNS = [
34-
{ label: 'Task', renderCell: (item) => item.name },
33+
{ label: 'Task', renderCell: (item) => item.name, footer: hasFooter ? 'Task' : null },
3534
{
3635
label: 'Deadline',
3736
renderCell: (item) =>
@@ -40,30 +39,24 @@ const Component = () => {
4039
month: '2-digit',
4140
day: '2-digit',
4241
}),
42+
footer: hasFooter ? 'Deadline' : null,
4343
},
44-
{ label: 'Type', renderCell: (item) => item.type },
44+
{ label: 'Type', renderCell: (item) => item.type, footer: hasFooter ? 'Type' : null },
4545
{
4646
label: 'Complete',
4747
renderCell: (item) => item.isComplete.toString(),
48+
footer: hasFooter ? 'Complete' : null,
49+
},
50+
{
51+
label: 'Tasks',
52+
renderCell: (item) => item.nodes?.length,
53+
footer: hasFooter ? 'Tasks' : null,
4854
},
49-
{ label: 'Tasks', renderCell: (item) => item.nodes?.length },
5055
];
5156

5257
const TABLE_OPTIONS = {
5358
renderAfterTable: () => (
5459
<>
55-
{hasFooter && (
56-
<Header>
57-
<HeaderRow className="tr-footer">
58-
<HeaderCell>Task</HeaderCell>
59-
<HeaderCell>Deadline</HeaderCell>
60-
<HeaderCell>Type</HeaderCell>
61-
<HeaderCell>Complete</HeaderCell>
62-
<HeaderCell>Tasks</HeaderCell>
63-
</HeaderRow>
64-
</Header>
65-
)}
66-
6760
{caption && (
6861
<div className="caption-container">
6962
<caption>{caption}</caption>
@@ -129,7 +122,6 @@ const code = `
129122
import * as React from 'react';
130123
131124
import { CompactTable } from '@table-library/react-table-library/compact';
132-
import { Header, HeaderRow, HeaderCell } from '@table-library/react-table-library/table';
133125
import { useTheme } from '@table-library/react-table-library/theme';
134126
import { DEFAULT_OPTIONS, getTheme } from '@table-library/react-table-library/themes/material-ui';
135127
@@ -159,7 +151,7 @@ const Component = () => {
159151
const theme = useTheme(materialTheme);
160152
161153
const COLUMNS = [
162-
{ label: 'Task', renderCell: (item) => item.name },
154+
{ label: 'Task', renderCell: (item) => item.name, footer: hasFooter ? 'Task' : null },
163155
{
164156
label: 'Deadline',
165157
renderCell: (item) =>
@@ -168,30 +160,24 @@ const Component = () => {
168160
month: '2-digit',
169161
day: '2-digit',
170162
}),
163+
footer: hasFooter ? 'Deadline' : null,
171164
},
172-
{ label: 'Type', renderCell: (item) => item.type },
165+
{ label: 'Type', renderCell: (item) => item.type, footer: hasFooter ? 'Type' : null },
173166
{
174167
label: 'Complete',
175168
renderCell: (item) => item.isComplete.toString(),
169+
footer: hasFooter ? 'Complete' : null,
170+
},
171+
{
172+
label: 'Tasks',
173+
renderCell: (item) => item.nodes?.length,
174+
footer: hasFooter ? 'Tasks' : null,
176175
},
177-
{ label: 'Tasks', renderCell: (item) => item.nodes?.length },
178176
];
179177
180178
const TABLE_OPTIONS = {
181179
renderAfterTable: () => (
182180
<>
183-
{hasFooter && (
184-
<Header>
185-
<HeaderRow className="tr-footer">
186-
<HeaderCell>Task</HeaderCell>
187-
<HeaderCell>Deadline</HeaderCell>
188-
<HeaderCell>Type</HeaderCell>
189-
<HeaderCell>Complete</HeaderCell>
190-
<HeaderCell>Tasks</HeaderCell>
191-
</HeaderRow>
192-
</Header>
193-
)}
194-
195181
{caption && (
196182
<div className="caption-container">
197183
<caption>{caption}</caption>

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@table-library/react-table-library",
3-
"version": "2.0.8",
3+
"version": "2.0.9",
44
"description": "react-table-library",
55
"type": "module",
66
"main": "main.js",

‎src/compact/CompactFooter.tsx

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import * as React from 'react';
2+
3+
import { Footer, FooterRow, FooterCell } from '@table-library/react-table-library/table/index';
4+
5+
import { Column } from '@table-library/react-table-library/types/compact';
6+
7+
type FooterProps = { columns: Column[] };
8+
9+
export const CompactFooter: React.FC<FooterProps> = ({ columns }: FooterProps) => {
10+
return (
11+
<Footer>
12+
<FooterRow>
13+
{columns.map((column: Column, index: number) => (
14+
<FooterCell key={index}>{column.footer}</FooterCell>
15+
))}
16+
</FooterRow>
17+
</Footer>
18+
);
19+
};

‎src/compact/CompactTable.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,11 @@ import { useTheme } from '@table-library/react-table-library/theme/index';
55

66
import { TableNode } from '@table-library/react-table-library/types/table';
77
import { Theme } from '@table-library/react-table-library/types/theme';
8-
import { CompactTableProps } from '@table-library/react-table-library/types/compact';
8+
import { CompactTableProps, Column } from '@table-library/react-table-library/types/compact';
99

1010
import { VirtualizedTable } from './VirtualizedTable';
1111
import { NormalTable } from './NormalTable';
12+
import { CompactFooter } from './CompactFooter';
1213

1314
const FULL_HEIGHT_THEME = {
1415
Table: `
@@ -82,6 +83,9 @@ export const CompactTable: React.FC<CompactTableProps> = React.forwardRef(
8283
{...tableProps}
8384
/>
8485
)}
86+
{columns.some((column: Column) => !!column.footer) && (
87+
<CompactFooter columns={columns} />
88+
)}
8589
{tableOptions?.renderAfterTable && tableOptions.renderAfterTable()}
8690
</>
8791
)}

0 commit comments

Comments
 (0)