Got started on a toolbar

layout.css

@@ -0,0 +1,70 @@
+.table-widget {
+    display: grid;
+
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr;
+
+    grid-template-areas: 'toolbar' 'table';
+
+    gap: 16px;
+
+    width: 100%;
+    height: 100%;
+}
+
+.toolbar {
+    grid-area: toolbar;
+    border-radius: var(--radius-m);
+    display: flex;
+    align-items: center;
+}
+
+.table-container {
+    grid-area: table;
+
+    border-collapse: collapse;
+    box-sizing: border-box;
+
+    display: grid;
+
+    position: relative;
+
+    overflow: auto;
+}
+
+.table-header {
+    grid-row: 1;
+    grid-column: 1 / -1;
+
+    display: grid;
+    grid-template-columns: subgrid;
+    grid-template-rows: subgrid;
+
+    /*position: sticky;*/
+    /*top: 0;*/
+}
+
+.table-body {
+    grid-column: 1 / -1;
+    grid-row: 2 / -1;
+
+    display: grid;
+
+    grid-template-columns: subgrid;
+    grid-template-rows: subgrid;
+}
+
+.table-container > * {
+    box-sizing: border-box;
+}
+
+.table-header-cell {
+    display: flex;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: clip;
+
+    font-weight: var(--table-header-weight);
+
+    /*border-top: var(--table-border-width) solid var(--table-border-color);*/
+}

settings.css

@@ -1,29 +1,53 @@
 .spreadsheet-settings {
     display: grid;
     grid-template-columns: auto 1fr;
-    grid-template-rows: auto auto 1fr;
+    grid-auto-rows: min-content;
 
     grid-template-areas: 
-        'description description'
-        'datatypes   editor'
-        'datatypes   editor';
+        'toolbar   toolbar'
+        'toolbar   toolbar'
+        'toolbar   toolbar'
+        'datatypes datatypes'
+        'datatypes datatypes'
+        'datatypes datatypes';
 
     width: 100%;
     height: 100%;
 
     gap: var(--size-4-2);
 }
 
-.spreadsheet-settings > .description {
+.spreadsheet-settings > .settings-group {
+    display: grid;
+    grid-template-columns: subgrid;
+    grid-template-rows: subgrid;
+
+    grid-template-areas:
+        'description description'
+        'listbox     editor'
+        'listbox     editor';
+
+    gap: var(--size-4-2);
+}
+
+.settings-group > .description {
     grid-area: description;
+    height: fit-content;
 }
 
-.spreadsheet-settings > .list-box {
+.spreadsheet-settings > .toolbar-settings {
+    grid-area: toolbar;
+}
+.spreadsheet-settings > .datatypes {
     grid-area: datatypes;
+}
+
+.settings-group > .list-box {
+    grid-area: listbox;
     resize: horizontal;
 }
 
-.spreadsheet-settings > .editor {
+.settings-group > .editor {
     grid-area: editor;
     display: grid;
     grid-template-columns: subgrid;
@@ -48,9 +72,15 @@
 }
 
 input.monospace {
-    font-family: var(--font-monospace-theme);
+    font-family: var(--font-monospace-theme), monospace;
 }
 
 .option {
     min-height: 1em;
+}
+
+.spacer {
+    display: block;
+    border: var(--border-width) solid var(--color-base-40);
+    width: 100%;
 }

src/actions.ts

@@ -0,0 +1,68 @@
+import Spreadsheet from "./viewport.js";
+import { icons } from 'lucide-react';
+
+export type Tool = {
+    description: string;
+    label: string;
+    icon: keyof typeof icons
+} & (Button | ViewportOptions);
+export type Button = {
+    type: 'button',
+    onClick: (sheet: Spreadsheet) => void,
+};
+export type ViewportOptions = {
+    type: 'viewport',
+}
+
+export const tools = {
+    'copy': {
+        type: 'button',
+        label: 'Copy',
+        description: 'Copy Selected Cells',
+        icon: 'Copy',
+        onClick: sheet => void 0
+    },
+    'cut': {
+        type: 'button',
+        label: 'Cut',
+        description: 'Cut Selected Cells',
+        icon: 'Scissors',
+        onClick: sheet => void 0
+    },
+    'paste': {
+        type: 'button',
+        label: 'Paste',
+        description: 'Paste Selected Cells',
+        icon: 'Clipboard',
+        onClick: sheet => void 0
+    },
+    'sort': {
+        type: 'button',
+        label: 'Sorting',
+        description: 'Set Sorting Method',
+        icon: 'ArrowDownNarrowWide',
+        onClick: sheet => void 0
+    },
+    'filter': {
+        type: 'button',
+        label: 'Filter',
+        description: 'Filter viewport',
+        icon: 'Filter',
+        onClick: sheet => void 0
+    },
+    'group': {
+        type: 'button',
+        label: 'Group',
+        description: 'Set grouping options',
+        icon: 'Group',
+        onClick: sheet => void 0
+    },
+    'viewOptions': {
+        type: 'viewport',
+        label: "Viewport Options",
+        description: "Unified viewport options (Sorting, Filter, Grouping, Columns)",
+        icon: 'View'
+    }
+} satisfies { [ToolName in string]: Tool };
+
+export default tools

src/components/toolbar.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import * as icons from 'lucide-react';
+
+import Spreadsheet from "../viewport.js";
+import {Settings} from "../settings/settingsTab.js";
+import Tools, {Tool} from '../actions.js';
+
+export default function Toolbar(props: { settings: Settings, sheet: Spreadsheet }) {
+    return <div className={"flex toolbar"}>
+        {props.settings.toolbar
+            .map(item => typeof item == 'string' ? toolRenderers[Tools[item].type](Tools[item]) : <span className={"gap"}/> )}
+    </div>
+}
+
+const Icon = (props: { icon: keyof typeof icons.icons, size?: number }) => {
+    const Icon = icons.icons[props.icon];
+    return <Icon size={props.size ?? 12}/>
+}
+
+export const toolRenderers = {
+    button: tool => <button className={"toolbar-button"}>
+        <Icon icon={tool.icon} />
+    </button>,
+    viewport: tool => null
+} satisfies Record<(typeof Tools[keyof typeof Tools])['type'], (tool: Tool) => React.ReactNode>;

src/main.ts

@@ -2,14 +2,14 @@ import * as path from 'node:path';
 import * as obs from 'obsidian';
 
 import Spreadsheet, {SPREADSHEET_VIEW} from "./viewport.js";
-import SettingsTab, { default_settings, Settings } from "./settingsTab.js";
+import SettingsTab, { default_settings, Settings } from "./settings/settingsTab.js";
 
 export default class SpreadsheetPlugin extends obs.Plugin {
     settingsTab: SettingsTab | null = null;
     settings: Settings = default_settings;
 
     async onload() {
-        this.registerView(SPREADSHEET_VIEW, leaf => new Spreadsheet(leaf));
+        this.registerView(SPREADSHEET_VIEW, leaf => new Spreadsheet(leaf, this));
         this.registerExtensions(["csv", "tab"], SPREADSHEET_VIEW);
 
         this.addSettingTab(this.settingsTab = new SettingsTab(this.app, this));