Plugin: Better Tables

Plugins
1
logo.svg148×118 4.54 KB
Powerful interactive table editor for Joplin notes

View live demo

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 <br>)
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

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 by andrejilderda
macOS Dark Theme matching the Joplin macOS dark theme by andrejilderda
One Dark Theme based on colors in the CodeMirror OneDark theme

Advanced settings

These settings override styles and themes in 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

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

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
/* 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;
}

More information on github

2 Likes