https://github.com/ckant/joplin-plugin-better-tables

Powerful interactive table editor for Joplin notes
https://github.com/ckant/joplin-plugin-better-tables

joplin joplin-plugin markdown-tables

Last synced: 3 months ago
JSON representation

Powerful interactive table editor for Joplin notes

Host: GitHub
URL: https://github.com/ckant/joplin-plugin-better-tables
Owner: ckant
License: mit
Created: 2026-03-09T04:07:54.000Z (3 months ago)
Default Branch: main
Last Pushed: 2026-03-09T04:11:47.000Z (3 months ago)
Last Synced: 2026-03-09T07:23:15.414Z (3 months ago)
Topics: joplin, joplin-plugin, markdown-tables
Language: TypeScript
Homepage: https://ckant.com/codemirror-markdown-tables
Size: 2.55 MB
Stars: 0
Watchers: 0
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

README

Powerful interactive table editor for Joplin notes

View live demo

Features •
Installation •
Settings •
Troubleshooting •
Credits •
License

## Features

### Table editor

- **Renders** Markdown table text as **interactive HTML tables**
- **Autoformats** and **prettifies** Markdown tables **while editing**
- **Renders** **custom styles** and **custom themes** in code and/or CSS
- **Renders** cells with **multi-line text**
- **Autocorrects line breaks** around tables **while editing** to keep them separate from surrounding text
- **Integrates** with native **undo history**
- **Integrates** with native **search**
- **Implements** touch-friendly controls and editing for **mobile**
- **Autoinserts line breaks** around **pasted tables** when necessary to keep them on their own lines
- **Autoescapes pipe characters** in cell text

#### Interactions

##### Type multi-line text

- **Create** line breaks with Shift+Enter (inserts a `
`)

##### Navigate around the table

- **Move around** the table with Up,Down,Left,Right
- **Move** to the **next cell** with Tab
- **Append a new row** by moving past the last cell
- **Move** to the **previous cell** with Shift+Tab
- **Prepend** a **new row** by moving before the first cell
- **Move** to the **cell below** with Enter
- **Append** a **new row** by moving past the last row

##### Select cells

- **Select** a group of **cells** by Clicking and Dragging
- **Scroll** the table by Dragging past the editor edge
- **Resize** the cell **selection** by Shift+Clicking and Dragging
- **Resize** the cell **selection** with Shift+Up,Shift+Down,Shift+Left,Shift+Right

##### Clear cells

- **Clear** selected cells with Backspace,Delete
- **Delete** selected **empty rows/columns** with Backspace,Delete

##### Copy/paste cells

- **Copy** selected cells **as a Markdown table** with Ctrl+C/Cmd+C
- **Cut** selected cells **as a Markdown table** with Ctrl+X/Cmd+X
- **Paste** a **Markdown table** into selected cells with Ctrl+V/Cmd+V
- Select excess cells to **duplicate** the pasted Markdown table **across the extra cells**

##### Rearrange a row/column

- **Move row/column** by Clicking Row/Column and Dragging to a new location
- **Scroll** the table by Dragging past the editor edge

##### Insert rows/columns

- **Insert** a **row** by Clicking Row Border
- **Insert** one or more **rows** by Clicking Row Border and Dragging Down
- **Insert** a **column** by Clicking Column Border
- **Insert** one or more **columns** by Clicking Column Border and Dragging Right

##### Delete empty rows/columns

- **Delete** one or more **empty rows** by Clicking Row Border and Dragging Up
- **Delete** one or more **empty columns** by Clicking Column Border and Dragging Left

##### Append rows/columns

- **Append** a **row** by Clicking Table Bottom Button
- **Append** one or more **rows** by Clicking Table Bottom Button and Dragging Down
- **Append** a **column** by Clicking Table Right Button
- **Append** one or more **columns** by Clicking Table Right Button and Dragging Right
- **Append** a **row and column** by Clicking Table Bottom-Right Button
- **Append** one or more **rows and columns** by Clicking Table Bottom-Right Button and Dragging Down-Right

##### Trim empty rows/columns

- **Trim** one or more **empty rows** by Clicking Table Bottom Button and Dragging Up
- **Trim** one or more **empty columns** by Clicking Table Right Button and Dragging Left
- **Trim** one or more **empty rows and columns** by Clicking Table Bottom-Right Button and Dragging Up-Left

##### Execute actions on a row/column

- **Open row/column menu** by Clicking Row/Column
- **Sort by column**
- **Align a column** to left, center, or right
- **Unalign a column**
- **Add a row/column**
- **Move a row/column**
- **Duplicate a row/column**
- **Clear a row/column**
- **Delete a row/column**

### Autocompletion

**A convenient autocomplete menu for creating tables**

- **Pop up** an **autocompletion menu** by Typing`|` on an empty line

### Keyboard shortcut / menu item

**A command that smartly inserts a new Markdown table**

- **Insert** a **new table** by clicking Edit->Insert table
- **Select text** beforehand to **replace text** with a **new table**
- **Assign** a **keyboard shortcut** in Settings->Keyboard Shortcuts->Insert table

## Installation

> [!IMPORTANT]
> The plugin doesn't work with the legacy Markdown editor.
>
> Ensure that `Use the legacy Markdown editor` is **unchecked** in Joplin General settings.

```
Search for Better Tables in Joplin [Settings]->[Plugins]
```

## Settings

| Setting | Options | Description |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- |
| Light theme | Light*
Dark
Minimal Light
Minimal Dark
GitHub Light
GitHub Dark
GitHub Soft Dark
macOS Light
macOS Dark
One Dark | Sets the table light theme |
| Dark theme | Light
Dark*
Minimal Light
Minimal Dark
GitHub Light
GitHub Dark
GitHub Soft Dark
macOS Light
macOS Dark
One Dark | Sets the table dark theme |
| Handle position | Inside*
Outside | Sets the position of row and column handles |
| Line wrapping | Wrap*
Nowrap | Sets the line wrapping |

#### Table themes

| Name | Description |
| ---------------- |-----------------------------------------------------------------------------------------------------------------------------------|
| Light | Theme matching the Joplin default light theme with striped rows |
| Dark | Theme matching the Joplin default dark theme with striped rows |
| Minimal Light | Theme matching the Joplin default light theme without striped rows |
| Minimal Dark | Theme matching the Joplin default dark theme without striped rows |
| GitHub Light | Theme based on table colors in GitHub's light theme |
| GitHub Dark | Theme based on table colors in GitHub's dark theme |
| GitHub Soft Dark | Theme based on table colors in GitHub's soft dark theme |
| macOS Light | Theme matching the Joplin [macOS light theme](https://joplinapp.org/plugins/plugin/com.andrejilderda.macOSTheme) by andrejilderda |
| macOS Dark | Theme matching the Joplin [macOS dark theme](https://joplinapp.org/plugins/plugin/com.andrejilderda.macOSTheme) by andrejilderda |
| One Dark | Theme based on colors in the [CodeMirror OneDark theme](https://github.com/codemirror/theme-one-dark) |

#### Advanced settings

> [!NOTE]
> These settings override styles and themes in [`codemirror-markdown-tables`](https://github.com/ckant/codemirror-markdown-tables)

##### Style overrides

| Setting | Values | Description |
| ------------------------ | ------------------------- | -------------------------------------- |
| Font family | CSS `font-family` | Overrides the font family |
| Font size | CSS `font-size` | Overrides the font size |
| Menu font family | CSS `font-family` | Overrides the menu font family |
| Menu font size | CSS `font-size` | Overrides the menu font size |
| Default header alignment | `Left`, `Center`, `Right` | Overrides the default header alignment |

##### Theme overrides

| Setting | Values | Description |
| ------------------------------ | ----------- | -------------------------------------------------- |
| Row background | CSS `color` | Overrides the theme row background |
| Header row background | CSS `color` | Overrides the theme header row background |
| Even row background | CSS `color` | Overrides the theme even row background |
| Odd row background | CSS `color` | Overrides the theme odd row background |
| Border color | CSS `color` | Overrides the theme border color |
| Border hover color | CSS `color` | Overrides the theme border hover color |
| Border active color | CSS `color` | Overrides the theme border active color |
| Outline color | CSS `color` | Overrides the theme outline color |
| Text color | CSS `color` | Overrides the theme text color |
| Menu border color | CSS `color` | Overrides the theme menu border color |
| Menu background | CSS `color` | Overrides the theme menu background |
| Menu hover background | CSS `color` | Overrides the theme menu hover background |
| Menu text color | CSS `color` | Overrides the theme menu text color |
| Menu hover text color | CSS `color` | Overrides the theme menu hover text color |
| Select all overlay focus color | CSS `color` | Overrides the theme select all overlay focus color |
| Select all overlay color | CSS `color` | Overrides the theme select all overlay color |

##### CSS overrides

Custom stylesheets can also override styles and themes

> [!TIP]
> Modify custom stylesheets in Joplin Settings->General->Appearance->Show Advanced Settings->Custom stylesheet for Joplin-wide app styles

> [!NOTE]
> The CSS variables are defined in `:root` scope

###### Style variables

| Property | Values | Description |
| ------------------------------------------------------------------ | ------------------------------- | ----------------------------------------------------------------------- |
| --tbl-style-font-family | CSS `font-family` | Font family of text |
| --tbl-style-font-size | CSS `font-size` | Font size of text |
| --tbl-style-menu-font-family | CSS `font-family` | Font family of menu item text |
| --tbl-style-menu-font-size | CSS `font-size` | Font size of menu item text |
| --tbl-style-default-header-alignment | `"left"`, `"center"`, `"right"` | Alignment of text in header cell when its column is otherwise unaligned |

###### Theme variables

| Variable | Values | Description |
|--------------------------------------------------------------------| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| --tbl-theme-row-background | CSS `color` | Background color of all cells, unless overriden by other `*-row-background` properties |
| --tbl-theme-header-row-background | CSS `color` | Background color of the cells in the header row |
| --tbl-theme-even-row-background | CSS `color` | Background color of the cells in even rows |
| --tbl-theme-odd-row-background | CSS `color` | Background color of the cells in odd rows (except the header row) |
| --tbl-theme-border-color | CSS `color` | Color of borders |
| --tbl-theme-border-hover-color | CSS `color` | Color of a hovered border |
| --tbl-theme-border-active-color | CSS `color` | Color of a clicked border |
| --tbl-theme-outline-color | CSS `color` | Color of the outline around selected cells |
| --tbl-theme-text-color | CSS `color` | Color of text |
| --tbl-theme-menu-border-color | CSS `color` | Color of menu borders |
| --tbl-theme-menu-background | CSS `color` | Background color of menu items |
| --tbl-theme-menu-hover-background | CSS `color` | Background color of a hovered menu item |
| --tbl-theme-menu-text-color | CSS `color` | Color of menu item text |
| --tbl-theme-menu-hover-text-color | CSS `color` | Color of hovered menu item text |
| --tbl-theme-select-all-focus-overlay | CSS `color` | Color of the layer overlaid on table when a Select All takes place and the editor has focus

The overlay shows as an alpha layer _above the table_ whereas CodeMirror places its default selection background _behind editor text_
So specify an alpha overlay color that, when mixed with the table background color, mimics the opaque CodeMirror selection background color |
| --tbl-theme-select-all-blur-overlay | CSS `color` | Color of the layer overlaid on table when a Select All takes place and the editor _doesn't_ have focus

The overlay shows as an alpha layer _above the table_ whereas CodeMirror places its default selection background _behind editor text_
So specify an alpha overlay color that, when mixed with the table background color, mimics the opaque CodeMirror selection background color |

###### Custom stylesheet example

```css
/* Set a row background that only applies in light mode */
:root:has([data-tbl-theme-mode="light"]) {
--tbl-theme-row-background: gray;
}

/* Set a row background that only applies in dark mode */
:root:has([data-tbl-theme-mode="dark"]) {
--tbl-theme-row-background: #000;
}

/* Set a custom font */
:root {
--tbl-style-font-family: monospace;
--tbl-style-font-size: 13px;
}
```

## Troubleshooting

### The plugin isn't working

Ensure that `Use the legacy Markdown editor` is **unchecked** in Joplin General settings.

## Credits

- [Joplin](https://joplinapp.org)
- [CodeMirror](https://codemirror.net)
- [Svelte](https://svelte.dev)

## License

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/ckant/joplin-plugin-better-tables

Awesome Lists containing this project

README

Powerful interactive table editor for Joplin notes