Skip to content

Plugin that adds features to tables in obsidian including merging, vertical headers, and custom css

License

Notifications You must be signed in to change notification settings

cloudydev/obsidian-advanced-table

 
 

Repository files navigation

Obsidian Sheets

downloads

Obsidian downloads

This is a plugin for Obsidian that brings greater functionality and usage of markdown tables.

Features

  • Cell Merging
  • Vertical Table Headings
  • Custom css cell styles
  • Advanced Tables compatibility

How to Use

Create a normal markdown table and start using Obsidian Sheets features:

The characters < and ^ in a cell will merge it with the cell to the left and above. Merged cells stack with each other, as seen below.

| Just                               | a   | normal       | table |
| ---------------------------------- | --- | ------------ | ----- |
| Use `<` to merge cells to the left | <   | Merged cell! | <     |
| Use `^` to merge cells up          | <   | ^            | ^     |

Cell Merging Functionality

Vertical Headers are created by making a column contain only dashes, much like how native horizontal headers are made with a row containing only dashes.

| I        | -   | have | horizontal | headers |
| -------- | --- | ---- | ---------- | ------- |
| also     | -   | foo  | bar        | <       |
| have     | -   | 1    | 2          | 3       |
| vertical | -   | A    | B          | C       |
| headers! | -   | X    | Y          | Z       |

Vertical Headers

And it works with Advanced Tables!

Use the sheet language tag and start using Obsidian Sheets with custom CSS! Partition off the class names, prefixed with a . using a ~ as seen below and use CSS with said class names in metadata above the table.

```sheet
{
    classes: { 
        class1: { 
            "color": "cyan",
        },
        class2: {
            backgroundColor: "#555",
        }
    },
}
---
| I                 | -   | have | meta                  | data        | too! |
| ----------------- | --- | ---- | --------------------- | ----------- | ---- |
| group 1           | -   | foo  | bar ~ .class1 .class2 | baz         | test |
| group 2 ~ .class1 | -   | 1    | ^                     | 3 ~ .class2 | 4    |

```

Custom CSS

Apply custom css to full rows and headers by applying custom classes to the row and column headers. Markdown table alignment with : is also allowed.

```sheet
{
    classes: {
        c1: {
            "color": "cyan",
        },
        c2: {
            backgroundColor: "#555",
        }
    },
}

---

| I           | ----   | have     | meta       | data  | too! |
| ----------- | ----   | -: ~ .c2 | ---------- | ----- | ---- |
| group 1     | - ~.c1 | foo      | bar        | baz   | test |
| group 2     | ------ | 1        | ^          | 3     | 4    |

```

Header Custom CSS

Apply custom styles to the entire table by using the custom styles/classes syntax on the metadata!

```sheet

{
    classes: {
        c1: {
            "color": "cyan",
        },
        c2: {
            backgroundColor: "#555",
        }
    },
}

--- ~ { color: 'red' }

| I           | ----   | have     | meta                  | data        | too! |
| ------------| ------ | -: ~ .c2 | --------------------- | ----------- | ---- |
| group 1     | ----   | ~~foo~~  | bar ~ .c1 .c2         | $baz$       | test |
| group 2     | - ~.c1 | 1\. test | ^                     | 3 ~ .c2     | 4    |
```

Table Custom CSS

You can also directly apply custom css to cells instead of defining a class

| Custom  | css                             | cells |
| ------- | ------------------------------- | ----- |
| group 1 | foo ~ { "text-align": "right" } | <     |

Cell Custom CSS

Installation

From within Obsidian

This plugin is now available on Obsidian community plugins under the name Sheets Extended.

Go to Settings -> Community plugins -> Browse, search for Sheets Extended, click install then enable.

Manual

  1. Download main.js, styles.css, and mainfest.json from releases
  2. Place the installed files in <vault>/.obsidian/plugins/sheets
  3. Reload Obsidian (Open command palette and Reload without saving)
  4. Go to Settings -> Options -> Community Plugins and disable safe mode
  5. Enable the plugin Sheets Extended under Settings -> Options -> Community Plugins -> Installed plugins

Future Functionality

  • Merging Cells
  • Vertical Headers
  • Custom Cell Styles
    • Custom row and column styles
    • Inline custom styles
  • Automatic advanced-table-like Formatting
    • Custom css for advanced-table

Support me!

Using this plugin is completely free, but if you would like to support me or think that I have contributed value to your days you can support me here:

PayPal BuyMeACoffee

About

Plugin that adds features to tables in obsidian including merging, vertical headers, and custom css

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 80.4%
  • JavaScript 15.0%
  • CSS 3.6%
  • PowerShell 1.0%