feat(frontend): implement grid view

1 files changed, 43 insertions, 0 deletions

diff --git a/subprojects/frontend/src/table/TableToolbar.tsx b/subprojects/frontend/src/table/TableToolbar.tsx
new file mode 100644
index 00000000..7645deae
--- /dev/null
+++ b/subprojects/frontend/src/table/TableToolbar.tsx
@@ -0,0 +1,43 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import Stack from '@mui/material/Stack';
+import {
+  GridToolbarColumnsButton,
+  GridToolbarContainer,
+  GridToolbarDensitySelector,
+  GridToolbarExport,
+  GridToolbarFilterButton,
+} from '@mui/x-data-grid';
+
+import type GraphStore from '../graph/GraphStore';
+
+import SymbolSelector from './SymbolSelector';
+
+export default function TableToolbar({
+  graph,
+}: {
+  graph: GraphStore;
+}): JSX.Element {
+  return (
+    <GridToolbarContainer
+      sx={{
+        display: 'flex',
+        flexDirection: 'row',
+        flexWrap: 'wrap-reverse',
+        justifyContent: 'space-between',
+      }}
+    >
+      <Stack direction="row" flexWrap="wrap">
+        <GridToolbarColumnsButton />
+        <GridToolbarFilterButton />
+        <GridToolbarDensitySelector />
+        <GridToolbarExport />
+      </Stack>
+      <SymbolSelector graph={graph} />
+    </GridToolbarContainer>
+  );
+}