Skip to content

Commit 1a5e71c

Browse files
mckervincmckervinc
committed
add footer
1 parent 888729d commit 1a5e71c

23 files changed

+286
-58
lines changed

‎example/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<title>react-fluid-table</title>
77
</head>
88
<body>
9-
<div id="root"></div>
9+
<div id="root" style="height: 100%;"></div>
1010
<script type="module" src="/src/main.tsx"></script>
1111
</body>
1212
</html>

‎example/src/App.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { Example6, Source as Example6Code } from "./examples/06-expanded";
1010
import { Example7, Source as Example7Code } from "./examples/07-controlled";
1111
import { Example8, Source as Example8Code } from "./examples/08-header";
1212
import { Example9, Source as Example9Code } from "./examples/09-scroll";
13+
import { Example10, Source as Example10Code } from "./examples/10-footer";
1314

1415
const router = createHashRouter([
1516
{
@@ -84,6 +85,14 @@ const router = createHashRouter([
8485
</Page>
8586
)
8687
},
88+
{
89+
path: "/footer",
90+
element: (
91+
<Page title="Footer" code={Example10Code}>
92+
<Example10 />
93+
</Page>
94+
)
95+
},
8796
{
8897
path: "/props",
8998
element: (

‎example/src/Page.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,9 @@ const LinkContainer = () => (
9696
<Menu.Item as={Link} to="/scroll">
9797
Methods
9898
</Menu.Item>
99+
<Menu.Item as={Link} to="/footer">
100+
Footer
101+
</Menu.Item>
99102
<Menu.Item as={Link} to="/props">
100103
Table Props
101104
</Menu.Item>

‎example/src/Props.tsx‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,7 @@ const data: PropData[] = [
145145
},
146146
{
147147
prop: "sortDirection",
148-
type: 'string | "ASC" | "DESC" ',
148+
type: '"ASC" | "DESC" | null',
149149
description: "The direction of the sorted column (can be controlled)"
150150
},
151151
{
@@ -165,7 +165,7 @@ const data: PropData[] = [
165165
prop: "borders",
166166
type: "boolean",
167167
description: "Controls whether or not there is a bottom border for each row",
168-
default: "true"
168+
default: "false"
169169
},
170170
{
171171
prop: "tableStyle",
@@ -198,6 +198,18 @@ const data: PropData[] = [
198198
type: "(props: CellElement) => Element",
199199
description:
200200
"A custom element used to wrap an entire row. This provides another way of customizing each row of the table"
201+
},
202+
{
203+
prop: "footerComponent",
204+
type: "() => Element",
205+
description: "You can provide an optional footer"
206+
},
207+
{
208+
prop: "stickyFooter",
209+
type: "boolean",
210+
description:
211+
"Controls whether or not the footer is sticky. This does nothing if footerComponent is not specified.",
212+
default: "false"
201213
}
202214
];
203215

@@ -281,7 +293,7 @@ const Props = () => (
281293
</Header.Subheader>
282294
</Header.Content>
283295
</Header>
284-
<Table data={data} columns={columns} tableHeight={500} />
296+
<Table borders data={data} columns={columns} tableHeight={500} />
285297
<Divider section />
286298
<Header dividing color="red">
287299
Required Props

‎example/src/examples/02-sort.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ const Example2 = () => {
4444

4545
return (
4646
<Table
47+
borders
4748
data={data}
4849
columns={columns}
4950
itemKey={row => row.id}
@@ -80,6 +81,7 @@ const Example = () => {
8081
8182
return (
8283
<Table
84+
borders
8385
data={data}
8486
columns={columns}
8587
itemKey={row => row.id}

‎example/src/examples/03-sub.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ const Example3 = () => {
5555

5656
return (
5757
<Table
58+
borders
5859
data={data}
5960
columns={columns}
6061
tableHeight={400}
@@ -92,6 +93,7 @@ const Example = () => {
9293
9394
return (
9495
<Table
96+
borders
9597
data={data}
9698
columns={columns}
9799
tableHeight={400}

‎example/src/examples/04-custom.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -324,7 +324,7 @@ const columns: ColumnProps<TestData>[] = [
324324
];
325325

326326
const Example4 = () => (
327-
<Table data={testData} columns={columns} tableHeight={400} rowHeight={150} />
327+
<Table borders data={testData} columns={columns} tableHeight={400} rowHeight={150} />
328328
);
329329

330330
const Source = `
@@ -372,6 +372,7 @@ const columns: ColumnProps<TestData>[] = [
372372
373373
const Example = () => (
374374
<Table
375+
borders
375376
data={data}
376377
columns={columns}
377378
tableHeight={400}

‎example/src/examples/05-variable.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const columns: ColumnProps<TestData>[] = [
2222
}
2323
];
2424

25-
const Example5 = () => <Table data={testData} columns={columns} tableHeight={400} />;
25+
const Example5 = () => <Table borders data={testData} columns={columns} tableHeight={400} />;
2626

2727
const Source = `
2828
const data = [/* ... */];
@@ -36,6 +36,7 @@ const columns: ColumnProps<TestData>[] = [
3636
3737
const Example = () => (
3838
<Table
39+
borders
3940
data={data}
4041
columns={columns}
4142
tableHeight={400}

‎example/src/examples/06-expanded.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ const SubComponent = ({ row, index, clearSizeCache }: SubComponentProps<TestData
109109
};
110110

111111
const Example6 = () => (
112-
<Table data={testData} columns={columns} tableHeight={400} subComponent={SubComponent} />
112+
<Table borders data={testData} columns={columns} tableHeight={400} subComponent={SubComponent} />
113113
);
114114

115115
const Source = `
@@ -183,6 +183,7 @@ const SubComponent = ({ row, index, clearSizeCache }: SubComponentProps<TestData
183183
184184
const Example = () => (
185185
<Table
186+
borders
186187
data={data}
187188
columns={columns}
188189
subComponent={SubComponent}

‎example/src/examples/07-controlled.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,7 @@ const Controlled = ({ data, height, columns: variableColumns }: ControlledProps)
9898

9999
return (
100100
<StyledTable
101+
borders
101102
data={rows}
102103
columns={variableColumns}
103104
tableHeight={height}
@@ -232,6 +233,7 @@ const Controlled = ({ data, columns: variableColumns }) => {
232233
233234
return (
234235
<StyledTable
236+
borders
235237
data={rows}
236238
columns={variableColumns}
237239
tableHeight={400}

0 commit comments

Comments
 (0)