Skip to content

Commit 118d6b9

Browse files
alex-calex-c
committed
Start implementing toolbars, move pager to toolbar
1 parent 0c44b4e commit 118d6b9

File tree

9 files changed

+232
-101
lines changed

9 files changed

+232
-101
lines changed

‎docs/src/pages/page-cell-customization.tsx

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { Code, Icon, Intent, Tag } from "@blueprintjs/core";
1+
import { Alignment, Code, Icon, Intent, Tag } from "@blueprintjs/core";
22
import { IconNames } from "@blueprintjs/icons";
3-
import { Column, ColumnType, Datagrid, Pager } from "../../../build";
3+
import { Column, ColumnType, Datagrid, Pager, Toolbar, ToolbarPosition } from "../../../build";
44
import { useAppSelector } from "../app/hooks";
55
import { Example } from "../components/example";
66
import { Page } from "../components/page";
@@ -30,7 +30,9 @@ const renderCode = `const userRenderer = (u: User) => (
3030
<Column field="name" label="User" sortable renderer={userRenderer} />
3131
<Column field="age" label="Age" type={ColumnType.NUMBER} sortable />
3232
<Column field="enabled" label="Enabled" type={ColumnType.BOOLEAN} />
33-
<Pager elementsPerPage={10} />
33+
<Toolbar position={ToolbarPosition.BOTTOM}>
34+
<Pager elementsPerPage={10} align={Alignment.RIGHT} />
35+
</Toolbar>
3436
</Datagrid>`;
3537

3638
const format = new Intl.NumberFormat("en-US");
@@ -78,7 +80,9 @@ export const CellCustomizationPage = () => {
7880
<Column field="name" label="User" sortable renderer={userRenderer} />
7981
<Column field="age" label="Age" type={ColumnType.NUMBER} sortable />
8082
<Column field="enabled" label="Enabled" type={ColumnType.BOOLEAN} />
81-
<Pager elementsPerPage={10} />
83+
<Toolbar position={ToolbarPosition.BOTTOM}>
84+
<Pager elementsPerPage={10} align={Alignment.RIGHT} />
85+
</Toolbar>
8286
</Datagrid>
8387
</Example>
8488
</Section>

‎docs/src/pages/page-home.tsx

Lines changed: 30 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { Code, Intent, Tag } from "@blueprintjs/core";
1+
import { Alignment, Code, Intent, Tag } from "@blueprintjs/core";
22
import { IconNames } from "@blueprintjs/icons";
3-
import { Action, Column, ColumnType, Datagrid, Pager } from "../../../build";
3+
import { Action, Column, ColumnType, Datagrid, Pager, Toolbar, ToolbarPosition } from "../../../build";
44
import { useAppSelector } from "../app/hooks";
55
import { CodeBlock } from "../components/code-block";
66
import { Example } from "../components/example";
@@ -20,14 +20,18 @@ const combinedExampleCode = `<Datagrid dataSource={varieties}>
2020
<Column field="rare" label="Rare" type={ColumnType.BOOLEAN} filter sortable />
2121
<Action icon={IconNames.EDIT} intent={Intent.PRIMARY} onClick={editVarietyAction} />
2222
<Action icon={IconNames.TRASH} intent={Intent.DANGER} onClick={deleteVarietyAction} />
23-
<Pager elementsPerPage={5} />
23+
<Toolbar position={ToolbarPosition.BOTTOM}>
24+
<Pager elementsPerPage={5} align={Alignment.RIGHT} />
25+
</Toolbar>
2426
</Datagrid>`;
2527

2628
const usageExampleCode = `<Datagrid dataSource={varieties}>
2729
<Column field="name" label="Name" />
2830
<Column field="shuUpperBound" label="Heat (SHU)" type={ColumnType.NUMBER} />
2931
<Column field="rare" label="Rare" type={ColumnType.BOOLEAN} />
30-
<Pager elementsPerPage={5} />
32+
<Toolbar position={ToolbarPosition.BOTTOM}>
33+
<Pager elementsPerPage={5} align={Alignment.RIGHT} />
34+
</Toolbar>
3135
</Datagrid>`;
3236

3337
export const HomePage = () => {
@@ -37,17 +41,21 @@ export const HomePage = () => {
3741
<Page title="Documentation">
3842
<Section>
3943
<p>
40-
Welcome to the <strong>Blueprint Datagrid</strong> documentation! <strong>Blueprint Datagrid</strong> is an enhanced table component for{" "}
44+
Welcome to the <strong>Blueprint Datagrid</strong> documentation! <strong>Blueprint Datagrid</strong> is an
45+
enhanced table component for{" "}
4146
<a href="https://blueprintjs.com/" target="_blank" rel="noreferrer">
4247
Blueprint 5
4348
</a>
44-
. It adds features like paging, sorting and filtering to basic Blueprint tables. <strong>Blueprint Datagrid</strong> is built with Blueprint components and styling and
45-
stays faithful to the look-and-feel of the library in both dark and light mode. It supports and is written in Typescript.
49+
. It adds features like paging, sorting and filtering to basic Blueprint tables. <strong>Blueprint
50+
Datagrid</strong> is built with Blueprint components and styling and
51+
stays faithful to the look-and-feel of the library in both dark and light mode. It supports and is written in
52+
Typescript.
4653
</p>
4754
</Section>
4855
<Section title="Example">
4956
<p>
50-
The following example shows most of the current features, like <strong>paging</strong>, <strong>sorting</strong>, <strong>filtering</strong>,{" "}
57+
The following example shows most of the current features,
58+
like <strong>paging</strong>, <strong>sorting</strong>, <strong>filtering</strong>,{" "}
5159
<strong>row-level actions</strong> and <strong>custom cell formatting</strong>:
5260
</p>
5361
<Example code={combinedExampleCode}>
@@ -59,13 +67,16 @@ export const HomePage = () => {
5967
<Column field="rare" label="Rare" type={ColumnType.BOOLEAN} filter sortable />
6068
<Action icon={IconNames.EDIT} intent={Intent.PRIMARY} onClick={editVarietyAction} />
6169
<Action icon={IconNames.TRASH} intent={Intent.DANGER} onClick={deleteVarietyAction} />
62-
<Pager elementsPerPage={5} />
70+
<Toolbar position={ToolbarPosition.BOTTOM}>
71+
<Pager elementsPerPage={5} align={Alignment.RIGHT} />
72+
</Toolbar>
6373
</Datagrid>
6474
</Example>
6575
</Section>
6676
<Section title="Dependencies">
6777
<p>
68-
<strong>Blueprint Datagrid</strong> depends on the following <a href="https://blueprintjs.com/">Blueprint 5</a> packages:
78+
<strong>Blueprint Datagrid</strong> depends on the following <a href="https://blueprintjs.com/">Blueprint
79+
5</a> packages:
6980
<ul>
7081
<li>
7182
<a href="https://www.npmjs.com/package/@blueprintjs/core">@blueprintjs/core</a>
@@ -77,7 +88,8 @@ export const HomePage = () => {
7788
<a href="https://www.npmjs.com/package/@blueprintjs/select">@blueprintjs/select</a>
7889
</li>
7990
</ul>
80-
The exact versions of these packages can be found in the project's <a href="https://github.com/alex-c/blueprint-datagrid/blob/main/package.json">package.json</a>.
91+
The exact versions of these packages can be found in the project's <a
92+
href="https://github.com/alex-c/blueprint-datagrid/blob/main/package.json">package.json</a>.
8193
</p>
8294
</Section>
8395
<Section title="Installation">
@@ -89,16 +101,20 @@ export const HomePage = () => {
89101
</Section>
90102
<Section title="Usage">
91103
<p>
92-
A <strong>Blueprint Datagrid</strong> is created with the <Code>Datagrid</Code> component and by passing it an array of objects as <Code>dataSource</Code>, which contain
93-
the data to use as the contents of the table. The <Code>Datagrid</Code> is mainy configured by passing additional components to it's slot, like <Code>Column</Code>{" "}
104+
A <strong>Blueprint Datagrid</strong> is created with the <Code>Datagrid</Code> component and by passing it an
105+
array of objects as <Code>dataSource</Code>, which contain
106+
the data to use as the contents of the table. The <Code>Datagrid</Code> is mainy configured by passing
107+
additional components to it's slot, like <Code>Column</Code>{" "}
94108
components or the <Code>Pager</Code>:
95109
</p>
96110
<Example code={usageExampleCode} showCode>
97111
<Datagrid dataSource={varieties}>
98112
<Column field="name" label="Name" />
99113
<Column field="shuUpperBound" label="Heat (SHU)" type={ColumnType.NUMBER} />
100114
<Column field="rare" label="Rare" type={ColumnType.BOOLEAN} />
101-
<Pager elementsPerPage={5} />
115+
<Toolbar position={ToolbarPosition.BOTTOM}>
116+
<Pager elementsPerPage={5} align={Alignment.RIGHT} />
117+
</Toolbar>
102118
</Datagrid>
103119
</Example>
104120
</Section>

‎docs/src/pages/page-pagination.tsx

Lines changed: 26 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { Code } from "@blueprintjs/core";
2-
import { Column, ColumnType, Datagrid, Pager } from "../../../build";
1+
import { Alignment, Code } from "@blueprintjs/core";
2+
import { Column, ColumnType, Datagrid, Pager, Toolbar, ToolbarPosition } from "../../../build";
33
import { useAppSelector } from "../app/hooks";
44
import { Example } from "../components/example";
55
import { Page } from "../components/page";
@@ -12,15 +12,19 @@ const paginationCode = `<Datagrid dataSource={users}>
1212
<Column field="name" label="Name" />
1313
<Column field="age" label="Age" type={ColumnType.NUMBER} />
1414
<Column field="enabled" label="Enabled" type={ColumnType.BOOLEAN} />
15-
<Pager elementsPerPage={10} />
15+
<Toolbar position={ToolbarPosition.BOTTOM}>
16+
<Pager elementsPerPage={10} align={Alignment.RIGHT} />
17+
</Toolbar>
1618
</Datagrid>`;
1719

1820
const directInputPaginationCode = `<Datagrid dataSource={users}>
1921
<Column field="id" label="ID" />
2022
<Column field="name" label="Name" />
2123
<Column field="age" label="Age" type={ColumnType.NUMBER} />
2224
<Column field="enabled" label="Enabled" type={ColumnType.BOOLEAN} />
23-
<Pager elementsPerPage={10} directInput />
25+
<Toolbar position={ToolbarPosition.BOTTOM}>
26+
<Pager elementsPerPage={10} align={Alignment.RIGHT} directInput />
27+
</Toolbar>
2428
</Datagrid>`;
2529

2630
export const PaginationPage = () => {
@@ -44,7 +48,9 @@ export const PaginationPage = () => {
4448
<Column field="name" label="Name" />
4549
<Column field="age" label="Age" type={ColumnType.NUMBER} />
4650
<Column field="enabled" label="Enabled" type={ColumnType.BOOLEAN} />
47-
<Pager elementsPerPage={10} />
51+
<Toolbar position={ToolbarPosition.BOTTOM}>
52+
<Pager elementsPerPage={10} align={Alignment.RIGHT} />
53+
</Toolbar>
4854
</Datagrid>
4955
</Example>
5056
<p className="new-section">
@@ -57,7 +63,9 @@ export const PaginationPage = () => {
5763
<Column field="shuLowerBound" label="Heat Lower Bound (SHU)" type={ColumnType.NUMBER} />
5864
<Column field="shuUpperBound" label="Heat Upper Bound (SHU)" type={ColumnType.NUMBER} />
5965
<Column field="rare" label="Rare" type={ColumnType.BOOLEAN} />
60-
<Pager elementsPerPage={5} />
66+
<Toolbar position={ToolbarPosition.BOTTOM}>
67+
<Pager elementsPerPage={10} align={Alignment.RIGHT} />
68+
</Toolbar>
6169
</Datagrid>
6270
</Section>
6371
<Section title="Empty Table & Many Pages">
@@ -68,15 +76,19 @@ export const PaginationPage = () => {
6876
<Column field="shuLowerBound" label="Heat Lower Bound (SHU)" type={ColumnType.NUMBER} />
6977
<Column field="shuUpperBound" label="Heat Upper Bound (SHU)" type={ColumnType.NUMBER} />
7078
<Column field="rare" label="Rare" type={ColumnType.BOOLEAN} />
71-
<Pager elementsPerPage={5} />
79+
<Toolbar position={ToolbarPosition.BOTTOM}>
80+
<Pager elementsPerPage={10} align={Alignment.RIGHT} />
81+
</Toolbar>
7282
</Datagrid>
7383
<p className="new-section">When there are many pages to display, some of the buttons are hidden in the pagination controls.</p>
7484
<Datagrid dataSource={manyUsers}>
7585
<Column field="id" label="ID" />
7686
<Column field="name" label="Name" />
7787
<Column field="age" label="Age" type={ColumnType.NUMBER} />
7888
<Column field="enabled" label="Enabled" type={ColumnType.BOOLEAN} />
79-
<Pager elementsPerPage={10} />
89+
<Toolbar position={ToolbarPosition.BOTTOM}>
90+
<Pager elementsPerPage={10} align={Alignment.RIGHT} />
91+
</Toolbar>
8092
</Datagrid>
8193
</Section>
8294
<Section title="Direct Input Mode">
@@ -91,7 +103,9 @@ export const PaginationPage = () => {
91103
<Column field="name" label="Name" />
92104
<Column field="age" label="Age" type={ColumnType.NUMBER} />
93105
<Column field="enabled" label="Enabled" type={ColumnType.BOOLEAN} />
94-
<Pager elementsPerPage={10} directInput />
106+
<Toolbar position={ToolbarPosition.BOTTOM}>
107+
<Pager elementsPerPage={10} align={Alignment.RIGHT} directInput />
108+
</Toolbar>
95109
</Datagrid>
96110
</Example>
97111
<p className="new-section">With many pages:</p>
@@ -100,7 +114,9 @@ export const PaginationPage = () => {
100114
<Column field="name" label="Name" />
101115
<Column field="age" label="Age" type={ColumnType.NUMBER} />
102116
<Column field="enabled" label="Enabled" type={ColumnType.BOOLEAN} />
103-
<Pager elementsPerPage={10} directInput />
117+
<Toolbar position={ToolbarPosition.BOTTOM}>
118+
<Pager elementsPerPage={10} align={Alignment.RIGHT} directInput />
119+
</Toolbar>
104120
</Datagrid>
105121
</Section>
106122
</Page>

‎docs/src/pages/page-sorting.tsx

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { Code } from "@blueprintjs/core";
2-
import { Column, ColumnType, Datagrid, Pager } from "../../../build";
1+
import { Alignment, Code } from "@blueprintjs/core";
2+
import { Column, ColumnType, Datagrid, Pager, Toolbar, ToolbarPosition } from "../../../build";
33
import { useAppSelector } from "../app/hooks";
44
import { Example } from "../components/example";
55
import { Page } from "../components/page";
@@ -10,7 +10,9 @@ const sortableCode = `<Datagrid dataSource={users}>
1010
<Column field="name" label="Name" sortable />
1111
<Column field="age" label="Age" type={ColumnType.NUMBER} sortable />
1212
<Column field="enabled" label="Enabled" type={ColumnType.BOOLEAN} sortable />
13-
<Pager elementsPerPage={10} />
13+
<Toolbar position={ToolbarPosition.BOTTOM}>
14+
<Pager elementsPerPage={10} align={Alignment.RIGHT} />
15+
</Toolbar>
1416
</Datagrid>`;
1517

1618
export const SortingPage = () => {
@@ -28,7 +30,9 @@ export const SortingPage = () => {
2830
<Column field="name" label="Name" sortable />
2931
<Column field="age" label="Age" type={ColumnType.NUMBER} sortable />
3032
<Column field="enabled" label="Enabled" type={ColumnType.BOOLEAN} sortable />
31-
<Pager elementsPerPage={10} />
33+
<Toolbar position={ToolbarPosition.BOTTOM}>
34+
<Pager elementsPerPage={10} align={Alignment.RIGHT} />
35+
</Toolbar>
3236
</Datagrid>
3337
</Example>
3438
</Section>

‎src/components/pager.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from "react";
2+
import { ToolbarItemProps } from "./toolbar";
23

3-
export interface PagerProps {
4+
export interface PagerProps extends ToolbarItemProps {
45
elementsPerPage: number;
56
directInput?: boolean;
67
}

‎src/components/toolbar.tsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from "react";
2+
import { Alignment } from "@blueprintjs/core";
3+
4+
export enum ToolbarPosition {
5+
TOP = "top",
6+
BOTTOM = "bottom",
7+
}
8+
9+
export interface ToolbarItemProps {
10+
align: Alignment;
11+
}
12+
13+
export interface ToolbarProps {
14+
position: ToolbarPosition;
15+
children: JSX.Element | JSX.Element[];
16+
}
17+
18+
export const Toolbar = (_: ToolbarProps) => <></>;

‎src/datagrid.scss

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,26 @@ $dark-table-border-color: $pt-dark-divider-white !default;
6969
}
7070
}
7171

72-
.datagrid-bottombar {
73-
margin-top: 10px;
74-
text-align: right;
72+
.datagrid-toolbar {
73+
display: flex;
74+
justify-content: space-between;
75+
76+
// Toolbar position in regard to the grid
77+
&.toolbar-top {
78+
margin-bottom: 10px;
79+
}
80+
&.toolbar-bottom {
81+
margin-top: 10px;
82+
}
83+
84+
// Alignment of items inside the toolbar
85+
.toolbar-left {
86+
text-align: left;
87+
}
88+
.toolbar-center {
89+
text-align: center;
90+
}
91+
.toolbar-right {
92+
text-align: right;
93+
}
7594
}

0 commit comments

Comments
 (0)