Home / JavaScript / Table/Grid

Improved table navigation, formatting, and manipulation in Obsidian.md

Improved table navigation, formatting, and manipulation in Obsidian.md
Information
Category: JavaScript / Table/Grid
Watchers: 3
Star: 19
Fork: 0
Last update: Nov 5, 2020
Resource links
https://github.com/tgrosinger/advanced-tables-obsidian

Obsidian Table Editor Plugin

Add improved navigation, formatting, and manipulation to markdown tables in Obsidian:

  • ☑ Excel-like table navigation (tab/enter between cells and rows)
  • ☑ Add and remove columns and rows
  • ☑ Auto formatting
  • ☑ Move columns left and right
  • ☑ Move rows up and down
  • ☑ Set column alignment (left, center, right)
  • ☑ Sort rows by a specified column
  • ☐ Simple arithmetic formulas
  • ☐ Your feature here?

Vote on the features you are interested in with the links above!

Demo

basic functionality

If you use a non-monospaced font while editing, it is recommended that you disable the "Pad cell width" setting under the plugin settings. See this forum post for steps on switching your editor to a monospaced font.

Note: The Obsidian API is still in early alpha and this plugin may break at any time!

How to use

When a cursor is in a markdown table...

Hotkey Action
Tab Next Cell
Shift + Tab Previous Cell
Enter Next Row
Ctrl + Shift + D Open table controls toolbar

Or use the command palette:

  • "Open table controls toolbar"
  • "Navigate to Next Cell"
  • "Navigate to Previous Cell"
  • "Navigate to Next Row"
  • "Insert column before current"
  • "Format table at the cursor"
  • "Left align column"
  • "Center align column"
  • "Right align column"

Compatibility

Custom plugins are only available for Obsidian v0.9.7+.

The current API of this repo targets Obsidian v0.9.7.

How to install the plugin

From within Obsidian

From Obsidian v0.9.8, you can activate this plugin within Obsidian by doing the following:

  • Open Settings > Third-party plugin
  • Make sure Safe mode is off
  • Click Browse community plugins
  • Search for "Table Editor"
  • Click Install
  • Once installed, close the community plugins window and activate the newly installed plugin

Updates

You can follow the same procedure to update the plugin

(Thanks to @deathau for the borrowed installation instructions.)

Notes

This is very experimental and may features from the library are not yet implemented. It is possible that there are bugs which may delete data in the current note. Please make backups!

4 Open More issues
Closed

Live Preview Issues with Links, Bold, Italics, etc.

Hey. I suspect you're aware of this already but I can't see any existing issues/comments regarding this, so making an issue just in case. You may also tell me this isn't changing!

Describe the bug

Following the live preview update, Advanced Tables is not adding the correct amount of spaces to other cells in the column that don't have the same formatting.

Take the following code.

| Column 1   | Column 2 | Column 3 |
| ---------- | -------- | -------- |
| **CELL1A** | CELL2A   | CELL3A   |
| CELL1B     | CELL2B   | CELL3B   |

This is displayed as follows:

image

As we can see, the padding has not been added to CELL1A. Safe to assume that Advanced Tables is including the ** before and after the value in the padding, therefore presuming no padding is required. This happens with italics, links, etc.

To Reproduce

Use the following example:

| Column 1   | Column 2 | Column 3 |
| ---------- | -------- | -------- |
| **CELL1A** | CELL2A   | CELL3A   |
| CELL1B     | CELL2B   | CELL3B   |

Expected behavior

It would be good if the now hidden formatting is ignored by Advanced Tables and the correct padding is added.

Screenshots

image

Desktop (please complete the following information):

  • OS: Windows 10
  • Obsidian v0.13.14
  • Advanced Tables Version: 0.15.0
enhancement on hold 
opened Dec 28, 2021 by martin-wall 22
Closed

Have toolbar stay visible or right click available

Is your feature request related to a problem? Please describe. As an idea, have the toolbar stay visible (floating at bottom of table, or under current row) or able to appear with a right-click.

Additional context When I click to have the toolbar appear, it works, then when I do anything else, it disappears and I have to ask for it again.

enhancement on hold 
opened Nov 12, 2020 by bdillahu 18
Closed

Add support for Tab and Enter in beta Live Preview

Describe the bug Tab does not seem to do anything when using the Live Preview mode

To Reproduce Steps to reproduce the behavior:

  1. Install the Obsidian v0.13.4 closed beta.
  2. Enable the Live Preview editor mode
  3. Navigate to a table, change formatting, press tab
  4. The whole row is shifted right instead of the table being re-formatted.

Expected behavior Table re-formatted, cursor moved to the next cell.

Desktop (please complete the following information):

  • OS: Ubuntu 20.04.3 LTS
  • Obsidian Version: v0.13.4
  • Advanced Tables Version: 0.13.0

Additional context I understand that Live Preview is super new and in beta, just a heads up.

enhancement 
opened Nov 20, 2021 by xl0 16
Closed

Cell Misalignment with Internal Links

Hey Mate, great plugin, I'l using it for everything! Thanks!

Describe the bug

When I create internal links the cells are misaligned in the edit view.

To Reproduce Steps to reproduce the behavior:

  1. Create a table.
  2. Put an internal link in a cell.
  3. Tab out of the cell.
  4. See error

Expected behavior The cells to stay aligned.

Screenshots image

Desktop (please complete the following information):

  • OS: Mac OS 11.2 Big Sur
  • Obsidian Version: 0.11.5
  • Advanced Tables Version: 0.11.0

Additional context Add any other context about the problem here.

bug needs-review 
opened Mar 18, 2021 by theSiberman 14
Closed

Table keybindings do not work

I am on Manjaro Linux with Obsidian 0.9.10

For me the default keybindings ( for next cell; for next row etc.) do not work, that is to say they do what I expect them to do outside of a table (indent; insert line break etc.)

Using the command palette, the functions themselves work well.

question 
opened Nov 2, 2020 by Cutuchiqueno 14
Closed

Only working when cursor is in first / left / index=0 pane

Describe the bug Typical layout might be split pane, Edit on left and Preview on right. This is how I usually work, and probably many others. BUT, if this gets reversed (preview left, edit right) strange things happen with Advanced Tables.

To Reproduce

  1. Put edit pane on left
  2. Make a new table
  3. Start mucking around with it
  4. Swap preview & edit panes.
  5. Muck some more...
  6. It's broken

Expected behavior Functions should work regardless of pane configuration.

Video

https://user-images.githubusercontent.com/1992842/115970530-ebdb2700-a510-11eb-9c81-a9d07f330486.mp4

Desktop (please complete the following information):

  • OS: macOS 11.2.3
  • Obsidian Version: 0.12.1
  • Advanced Tables Version: 0.12.2
bug 
opened Apr 24, 2021 by luckman212 12
Open

Add a toggle to only add spaces to match formatted result in live preview

Is your feature request related to a problem? Please describe. This issue is somewhat related to #145 in that it pertains to the way live preview hides formatting characters such as *, **, or [[. With obsidian 0.14.2 introducing table rendering in live preview, most of those issues have been resolved.

However, when editing the table and using internal links with changed display text (or external links in general), then the columns have a tendency to get wildly mismatched because 20+ characters get removed when the formatting characters get hidden.

Describe the solution you'd like I would like a toggle in the options menu to fill spaces up to the width of the formatted object (rather than the raw text) when editing the table.

This would make working with links inside tables much easier, and prevent tables from being unnecessarily wide.

Seeing as the formatting characters are only shown when the cursor is over the object itself, it seems more logical to scale the table to the formatted width (which is more often and consistently displayed), rather than the unformatted width which is only visible one area at a time.

Describe alternatives you've considered The current system is usable, but difficult to work with if using several links within a table

Additional context Here is a screenshot showing how misaligned the columns can be when using links with custom display text. Pay attention to row 6, and see how the final column is dragged significantly further out than it needs to be, as well as that row's final column being very misaligned with the rest of them.

Although it is a smaller issue, notice also that every item in the 2nd column is misaligned with the header as they all are internal links (with no custom display text)

Live Preview Obsidian_2022-06-24_14-46-25

Source Mode Obsidian_2022-06-24_15-02-19

enhancement needs-review 
opened Jun 24, 2022 by HyperEpsilon 0
Open

Set Field Type

Hi!

First off, I appreciate the development of this wonderful plugin. I am relatively new to Obsidian even though I've had it for quite some time, now I am finally getting seriously into it.

I have a question, more than an issue, but I didn't know where to write it. Is there a way to set the Field Type while setting up the table?

For instance, I have a small database of videos and learning materials. I would like to include a checkbox column, where I can tick off when I went through the lesson, or watched a video. Is this possible?

Thanks again.

opened May 24, 2022 by nelakay 1
Open

Akin to #188 and #191; use of links disrupts cell spacing

Describe the bug Inclusion of a link using the [[ ]] feature inherent to obsidian results in a table with non-uniform column widths.

To Reproduce Steps to reproduce the behavior:

  1. Make a table
  2. Make a separate note with a link to it, e.g. a note called ABCD
  3. Within the table change ABCD to [[ABCD]]
  4. Visual behavior as below:

Screenshots Obsidian_Fmt

Additional context Because there are several related, outstanding issues, I wanted to suggest that there is likely 1 fix to all these issues.

bug needs-review 
opened May 13, 2022 by vlaufer 0
Open

Switching to read view the table breaks

Hello all,

I dont know if im simply not doing something right or if this is a bug. When I switch to the [read] view my table is no longer formatted like a table and it looks like: image

When I am in the editing view the table works perfectly and looks great! Any ideas why this is happening or how to fix this?

Edit view: image

bug needs-review 
opened Apr 28, 2022 by ExceedingLife 2
Open

Characters with emoji presentation selectors swallow spaces

Describe the bug Using certain characters with an emoji presentation selector swallow a space in the layout, leading to cells to the right being offset by 1 space to the left for every such character in a cell.

To Reproduce Steps to reproduce the behavior:

  1. Create a table
  2. Add a character like ♂️ to a cell
  3. Watch the cell gets trimmed of 1 space

Expected behavior Spacing remained the same.

Screenshots image

Desktop (please complete the following information):

  • OS: Windows 10
  • Obsidian Version: 0.14.6
  • Advanced Tables Version: 0.17.3

Additional context Many characters in Unicode can be followed by a U+FE0F character to select an emoji representation of said character. Compare ♂ (U+2642) with ♂️ (U+2642 U+FE0F). This will probably not show up properly on GitHub's render, which seems to append U+FE0F even to normal characters. You can get an easy emoji sequence from emojipedia. The screenshot should make the difference clear between the two (first row with male sign containing the emoji selector, row after it without). I guess the U+FE0F might be taken on its own and figured to have a width of its own, thus decreasing the spacing count.

Edit: Ah, you can tell there's an additional zero-width character present when you put your cursor after the character in question and press backspace. Need to press twice to delete the character.

bug needs-review 
opened Apr 27, 2022 by ashemedai 0
Open

"Advanced Tables : Format all tables in this file" do not show up in the command palette

I tried to add "Advanced Tables : Format all tables in this file" by going to settings, core plugins, command palette and add this option to have it on top of other commands. But not only does it not add it, I don't have anything in the command palette for Advanced Tables other than to open table controls bar. This happens on Linux 0.14.5 and iOS latest.

bug needs-review 
opened Apr 22, 2022 by BlissfulTarpon 1

Contents

    tgrosinger Improved table navigation, formatting, and manipulation in Obsidian.md
    llZektorll OB_Template is a vault template reference for using Obsidian.
    alexobenauer Cross-reference navigation through your Obsidian tags and notes
    obsidian-rs obsidian - Ergonomic async http framework for amazing, reliable and efficient web
    kinabalu Obsidian Word Sprint plugin
    wajahatkarim3 The widgets (EditText and TextView) for support of money requirements like currency, number formatting, comma formatting etc.
    stephencelis Type-safe, functional string formatting in Swift.
    MarcinOrlowski Android date/time formatting library supporting formatting placeholders
    mapbox Turn-by-turn navigation logic and UI in Swift on iOS
    Ramotion :octocat: Navigation toolbar is a slide-modeled UI navigation controller made by @Ramotion - https://www.ramotion.com/agency/app-development/
    Ramotion :octocat: Navigation toolbar is a slide-modeled UI navigation controller made by @Ramotion - https://www.ramotion.com/agency/app-development/
    zack24q vue-navigation - A page navigation library, record routes and cache pages, like native app navigation. 一个页面导航库，记录路由并缓存页面，像原生 APP 导航一样。
    EvanBacon Test automatic navigation using Expo and React Navigation
    armcha Space Navigation is a library allowing easily integrate fully customizable Google Spaces like navigation to your app.
    benevbright An extension of react-navigation that makes your header collapsible.
    vipulasri Handling multiple backstacks with Bottom Navigation using Navigation Component.
    joshwingreene A starter kit that follows how I use Obsidian to manage my goals, tasks, notes, and software development knowledge base.
    caronchen Allow you to access your calibre libraries and read books directly in Obsidian.
    deathau Edit and display CookLang recipes in Obsidian
    Mara-Li The template for mkdocs-obsidian
    lynchjames An Obsidian plugin for displaying markdown notes as mind maps using Markmap.
    Share this repo

    Related Repos


    Table/Grid
    21
    Ever heard about a Picture based Dictionary? , it's here!
    gdscjgec PICTIONARY An awesome infographic encyclopedia made from your contributions for you! Explore the docs » View Demo · Report Bug · Request Feature Table
     
    Table/Grid
    10
    MomentumTable is material based rich DataTable component for Angular.
    joveo MomentumTable is material based rich DataTable component for Angular. It is based on material DataTable guidline.
     
    Table/Grid
    166
    📝 A website that make learning CSS grid easy and interactive
    Etesam913 📝 A website that make learning CSS grid easy and interactive
     
    Table/Grid
    1.2k
    Painless transitions for CSS Grid
    aholachek Painless transitions for CSS Grid
     
    Table/Grid
    37
    A grid layout with a magnetic 3D hover effect and a content preview animation.
    codrops Magnetic 3D Grid Interaction with Content Preview A grid layout with a magnetic 3D hover effect and a content preview animation. Article on Codrops De
     
    Table/Grid
    96
    A component that can arrange items according to the type of grids
    naver A component that can arrange items according to the type of grids.
     
    Table/Grid
    21
    We don't care about your life story!
    Jyldn Openrecipes Table of Contents Table of Contents Introduction Upload a new recipe Discussion Introduction This repository hosts https://www.openrecipes
     
    Table/Grid
    20
    An npm package to read Google Sheets data and convert it to JSON without publishing it to ...
    ZiyanK An npm package to read Google Sheets data and convert it to JSON without publishing it to the web. Simply change Share access to "Anyone with the link can View".
     
    Table/Grid
    108
    Grid with draggable and resizable items made with Angular.
    katoid Grid with draggable and resizable items for Angular. Perfect fit with highly customizable dashboards.
     
    Table/Grid
    6
    Excel/Google Sheets like UI for Firebase/Firestore
    FiretableProject Excel/Google Sheets like UI for Firebase/Firestore. No more admin portals!
     
    Table/Grid
    39
    EasyGrid - VanillaJS Responsive Grid
    BMSVieira 🔧 Fully Customizable 💪 No Dependencies, built with VanillaJS 🌎 Tested in All Modern Browsers 💻 Responsive 📈 Fast & Reliable 📚 Does not need CSS or any CSS Framework
     
    Table/Grid
    20
    Get JSONArray from public google sheets with using only spreadsheetId
    fureweb-com Get JSONArray from public google sheets with using only spreadsheetId
     
    Table/Grid
    19
    Improved table navigation, formatting, and manipulation in Obsidian.md
    tgrosinger Improved table navigation, formatting, and manipulation in Obsidian.md
     
    Table/Grid
    116
    3.7kb spreadsheet editor for the web, let your users import their data from excel
    renanlecaro importabular Lightweight spreadsheet editor for the web, to easily let your users import their data from excel. Lightweight Mobile friendly Copy / pas
     
    Table/Grid
    169
    The hackathon to build technologies for Thailand's journey to democracy and freedom. #devป...
    DevForThaiFreedom Developer for Thai Freedom Hackathon #Devปลดแอก Welcome to the Developer for Thai Freedom hackathon project. This website/repository will contain the