WIP on toolbar docs

Author: alex-c

docs/src/app.tsx

@@ -12,6 +12,7 @@ import { Route, Routes } from "react-router";
 import { DefiningColumnPage } from "./pages/page-defining-columns";
 import { MenuLink } from "./components/menu-link";
 import "./app.scss";
+import { ToolbarsPage } from "./pages/page-toolbars";
 
 function App() {
   return (
@@ -22,6 +23,7 @@ function App() {
           <Menu className={Classes.ELEVATION_1}>
             <MenuLink path="/" title="Home" />
             <MenuLink path="defining-columns" title="Defining Columns" />
+            <MenuLink path="toolbars" title="Toolbars" />
             <MenuLink path="empty-table" title="Empty Table" />
             <MenuLink path="pagination" title="Pagination" />
             <MenuLink path="sorting" title="Sorting" />
@@ -34,6 +36,7 @@ function App() {
           <Routes>
             <Route index element={<HomePage />} />
             <Route path="defining-columns" element={<DefiningColumnPage />} />
+            <Route path="toolbars" element={<ToolbarsPage />} />
             <Route path="empty-table" element={<EmptyTablePage />} />
             <Route path="pagination" element={<PaginationPage />} />
             <Route path="sorting" element={<SortingPage />} />

docs/src/pages/page-toolbars.tsx

@@ -0,0 +1,61 @@
+import { Alignment, Code, Intent, Tag } from "@blueprintjs/core";
+import { Column, ColumnType, Datagrid, Pager, Toolbar, ToolbarPosition } from "../../../build";
+import { Page } from "../components/page";
+import { Section } from "../components/section";
+import { Variety } from "../data/pepper-varieties/pepper-varieties";
+import { Example } from "../components/example";
+
+const positioningDemoCode = `<Datagrid dataSource={[] as Variety[]}>
+  <Toolbar position={ToolbarPosition.TOP}>
+    <DemoBox position={ToolbarPosition.TOP} align={Alignment.LEFT} />
+    <DemoBox position={ToolbarPosition.TOP} align={Alignment.CENTER} />
+    <DemoBox position={ToolbarPosition.TOP} align={Alignment.RIGHT} />
+  </Toolbar>
+  <Column field="name" label="Name" />
+  <Column field="species" label="Species" />
+  <Column field="shuLowerBound" label="Heat Lower Bound (SHU)" type={ColumnType.NUMBER} />
+  <Column field="shuUpperBound" label="Heat Upper Bound (SHU)" type={ColumnType.NUMBER} />
+  <Column field="rare" label="Rare" type={ColumnType.BOOLEAN} />
+  <Toolbar position={ToolbarPosition.BOTTOM}>
+    <DemoBox position={ToolbarPosition.BOTTOM} align={Alignment.LEFT} />
+    <DemoBox position={ToolbarPosition.BOTTOM} align={Alignment.CENTER} />
+    <DemoBox position={ToolbarPosition.BOTTOM} align={Alignment.RIGHT} />
+  </Toolbar>
+</Datagrid>`;
+
+const DemoBox = (props: { position: ToolbarPosition, align: Alignment }) => {
+  return (
+    <Tag intent={Intent.PRIMARY}>{props.position} {props.align}</Tag>
+  );
+};
+
+export const ToolbarsPage = () => {
+  return (
+    <Page title="Toolbars">
+      <Section>
+        <p>A Datagrid can have toolbars on the top and/or bottom, defined by using the <Code>Toolbar</Code> component
+          and specifying a <Code>ToolbarPosition</Code>. Inside a toolbar, elements can be aligned left, center or right
+          using Blueprint Core's <Code>Alignment</Code>.</p>
+        <Example code={positioningDemoCode}>
+          <Datagrid dataSource={[] as Variety[]}>
+            <Toolbar position={ToolbarPosition.TOP}>
+              <DemoBox position={ToolbarPosition.TOP} align={Alignment.LEFT} />
+              <DemoBox position={ToolbarPosition.TOP} align={Alignment.CENTER} />
+              <DemoBox position={ToolbarPosition.TOP} align={Alignment.RIGHT} />
+            </Toolbar>
+            <Column field="name" label="Name" />
+            <Column field="species" label="Species" />
+            <Column field="shuLowerBound" label="Heat Lower Bound (SHU)" type={ColumnType.NUMBER} />
+            <Column field="shuUpperBound" label="Heat Upper Bound (SHU)" type={ColumnType.NUMBER} />
+            <Column field="rare" label="Rare" type={ColumnType.BOOLEAN} />
+            <Toolbar position={ToolbarPosition.BOTTOM}>
+              <DemoBox position={ToolbarPosition.BOTTOM} align={Alignment.LEFT} />
+              <DemoBox position={ToolbarPosition.BOTTOM} align={Alignment.CENTER} />
+              <DemoBox position={ToolbarPosition.BOTTOM} align={Alignment.RIGHT} />
+            </Toolbar>
+          </Datagrid>
+        </Example>
+      </Section>
+    </Page>
+  );
+};