Git Product home page Git Product logo

obsidian-enhanced-tables's Introduction

Enhanced tables

A plugin for Obsidian to add advanced controls (like sorting, filtering and pagination) to standard markup tables.

Its is heavily inspired by DataLoom which is an incredible plugin, but I wanted my data to be stored in simple, easily accessible and editable tables, and not in JSON files which integrate in a less seamless way into the Obsidian workflow.

Example

Features

  • Add a configurable pagination to tables
  • Write custom filters and dynamically switch between them
  • Sort the table rows by their values
  • Apply automatic formatting for dates and numbers
  • Define "enum" columns with fixed values
  • Implement per-column custom formatting

How to install

Community Plugin

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

Manually installing the plugin

  • Go to the latest Releases
  • Download main.js, manifest.json
  • save into your vault VaultFolder/.obsidian/plugins/enhanced-tables/

How it works

If you want to add some advanced control or formatting to any standard Obsidian table, define before it a block of yaml code with the Enhanced tables configurations you want to apply to the table. When switching to view mode, if the configuration is corrent, the table will be formatted according to the provided configuration and will have all the needed advanced controls.

Configuration

Example configuration for the provided sample table

```yaml enhanced-tables

# date-format: DD-MM-YYYY
yes-format: "yes"
no-format: "no"

columns:
  Number column:
    alias: numberColumn
    type: number
    number-format: "style: 'currency', currency: 'EUR'"
  Date:
    type: date
    date-format: YYYY/MM/DD
  Formatted:
    formatter: "`#${$row.Id}) ${$cell}`"
    nowrap: true
  Hidden:
    hidden: true
  Rating:
    type: enum
    enum:
      '1': '⭐️'
      '2': '⭐️⭐️'
      '3': '⭐️⭐️⭐️'
      '4': '⭐️⭐️⭐️⭐️'
      '5': '⭐️⭐️⭐️⭐️⭐️'
  Boolean:
    type: bool
    yes-format: '👍'
    no-format: '👎'
filter: $row.numberColumn > 1200
filters:
 Small numbers: $row.numberColumn < 1200
 High rating: Number($row.Rating) > 3
sort: Rating
# sort: -Rating
pagination:
  page-size: 5
  page-sizes:
   - 5
   - 10
style: |
   th {
     background-color: var(--color-base-50) !important;
     color: var(--color-base-70) !important;
   }
# hide-controls: true
hide-configuration: true
```
| Id | Number column | Date       | Rating | Formatted    | Hidden             | Boolean  |
|----|---------------|------------|--------|--------------|--------------------| -------- |
| 1  | 500           | 01-01-2024 | 2      | _**bold**_   | Text you won't see |          |
| 2  | 1000          | 07-02-2024 | 5      |              |                    | no       |
| 3  | 1500          | 11-06-2024 | 1      | green        |                    | yes      | 
| 4  | 10000         | 05-01-2024 | 4      | ~~strike~~   |                    | whatever |

Configuration syntax

Yaml code opening syntax - yaml enhanced-tables

In order to be recognized as a valid Enhanced tables (ET), the yaml code must be defined with the enhanced-tables keyword.

```yaml enhanced-tables

Configuration properties

All the configuration properties are optional.

Property Type Description
date-format string Must be a valid moment.js string.
This property defines the input format for all columns of type date, eg how ET expects you to write them.
The default is DD-MM-YYYY.
datetime-format string Must be a valid moment.js string.
This property defines the input format for all columns of type datetime, eg how ET expects you to write them.
The default is DD-MM-YYYY HH:mm.
yes-format string The string that specifies, table-wide, how a boolean true value is represented in columns of type bool. The default is "1"
no-format string The string that specifies, table-wide, how a boolean false value is represented in columns of type bool. The default is "0"
columns object An object with the configurations for the table columns. Each column is optional: you don't have to configure a column if you don't need any advanced feature for it. The name of column must match the one on the first row of the table (its header).
Each column configuration is an object: see Column configuration properties for the details.
filter string Default filter for the table. Write it like a Javascript expression that has access to the $row variable.
Example:
  • $row.rating > 3
  • $row.status === 'active'
filters object Additional filters. The keys of the object will populate the filter selection dropdown. The value of each key is a Javascript expression that has access to the $row variable - see filter above.
sort string Name or alias of the column to sort the table by. Prepend the name or alias with - to specify descendant soring (eg: lastUpdated and -lastUpdated).
pagination object Pagination options, see Pagination configuration properties for the details.
hide-controls boolean If true do not show the sort and filter controls.
hide-configuration boolean If true hide the ET yaml configuration code when in in view mode.
style string A css string to apply custom styling to the table
editable boolean If true, the values of the column are editable also in view mode with inputs appropriate to the type of each column. This default configuration can be overridden per-column ⚠️ This is an experimental feature. It might not work as expected, corrupt your data and provide a user experience that is not optima!
Column configuration properties
All the column configuration properties are optional.

Property Type Description
alias string Sometimes column names can be long and not convienient to bse used in filters and formatter. You can specify an alias string for the column. If you do so, you must use it in filters and formatters.
type string Type of the column values. The possible values are: string | number | date | datetime | time | enum | bool. The default is string.
The display format of a column of type number can be specified by the property number-format.
The display format of a column of type date or datetime can be specified by the property date-format while time columns are always read formatted as HH:mm.
The display format of a column of type enum can be specified by the property enum.
The display format of a column of type bool can be specified by the property bool. ET determines if a value is boolean if it's equal to the one specified in the root-level yes-format
hidden boolean If true the column won't be displayed.
nowrap boolean If true, applies white-space: nowrap to the column cells.
number-format string How to format the numeric values of the column. It must be a string that defines options for Javascript's Intl.NumberFormat.
Examples:
  • "style: 'currency', currency: 'JPY'"
  • "maximumSignificantDigits: 3"
date-format string How to format the date or datetime values of the column. It must be a a valid moment.js string.
Overrides the root-level date-format and datetime-format if provided.
Examples:
  • "YYYY-MM"
  • "DD/MM/YY HH:mm"
yes-format object Defines how true boolean values are formatted. The default value is "✔" .
no-format object Defines how false boolean values are formatted. The default value is "✖" .
formatter string A custom formatter for the column values. Accepts any javascript code. Typically you want to use some Javascript template literal string like in the example. It has access to the variables $cell, $row and $ctx with some additional context.
Examples:
  • "\#${$row.someOtherColumn}) ${$cell}`"`
enum object Defines how enum values are formatted. Each key of the enum object is a valid enum string and its value is how it will be displayed.
Example:
enum:
  - won: "<span style="color: green">WON</span>"
  - lost: "<span style="color: red">LOST</span>"
editable boolean Overrides the root-level editable value for the specific column, so that it is possible to only make some columns editable in view mode.
searchable boolean If at least one column has this value set to true, show a search input tha can be used to filter the results looking into the values of the searchable columns.
Pagination configuration properties
Property Type Description page-size number Mandatory. How many items to display per page. page-sizes array Array of numbers defining the selectable page sizes. Defaults are: 25, 50, 100.

Advanced use

TableManager Api

The Enhanced tables plugin exposes a utility Api to work with markdown tables within a file. You can use it to program advanced integrations with custom tables, like buttons that change the table within a file.

A Tablemanager instance is exposed by the plugin and can be programmatically accessed via app.plugins.plugin['enhanced-tables'].tableManager;

Tablemanager

Each row of the table is represented by an array of strings, each being the content of a cell.

  type LineValues = string[];

The class exposes the following methods:

// In all the following methods:
//   `lineNo` = 0 = first data line
//   `lineNo` = n = nth line
//   `lineNo` = -1 = last line

// In all the following methods `fileContent: string` is typically the content of the current file
// accessible with `this.app.workspace.getActiveViewOfType(MarkdownView)?.data` or the content
// of a file got with `this.app.vault.read()`

// In all the following methods `tableIndex: number = 0`  is the optional index of the table in the file
// if a file has multiple tables in it. `0` is the first column, `1` the second and so on. 

// Insert the new table line represented by `values` into the provided fileContent at position `lineNo`.
//   Return the modified file content
function insertLine(fileContent: string, lineNo: number, values: LineValues, tableIndex = 0): string {}

// Replace the table line at position `lineNo` in the provided fileContent with
//   a new table line represented by `values`
//   Return the modified file content
function modifyLine(fileContent: string, lineNo: number, values: LineValues, tableIndex = 0): string {}

// Replace the header of the table in the provided fileContent with
//   a new table header represented by `values`
//   Return the modified file content
function modifyHeader(fileContent: string, values: LineValues, tableIndex = 0): string {}

// Delete the table line at position `lineNo` in the provided fileContent with
//   Return the modified file content
function removeLine(fileContent: string, lineNo: number, tableIndex = 0): string {}

// Returns the values of the table line at position `lineNo` in the provided fileContent with
function readLine(fileContent: string, lineNo: number, tableIndex = 0): LineValues| null {}

// Returns all the values of the table in the provided fileContent with
function readTableLines(fileContent: string, tableIndex = 0): LineValues | null {}

obsidian-enhanced-tables's People

Contributors

pistacchio avatar gdpdils avatar

Stargazers

Leo  avatar Jackalupe avatar  avatar  avatar Evie (GVguide) avatar  avatar  avatar Masoud Ghorbani avatar  avatar  avatar  avatar  avatar  avatar Nicole avatar  avatar Pch avatar emisjerry avatar  avatar a13ph avatar  avatar Gabriele Alfarano avatar  avatar  avatar  avatar ACai avatar

Watchers

 avatar

obsidian-enhanced-tables's Issues

Fixed table header

I would like to be able to see header's row as a fixed row while scrolling.
Is it possible as a feature request?

[Bug] Boolean mistake

There's an error in your sample:

Boolean:
    type: bool
    yes-format: '👍'
    no-format: '👎'

In the table's header: Bool
It should be Boolean.

BTW, i like this plugin. 👍

Help with filters

Hello,

This is a cool plugin! I am interested in using it for a video game spreadsheet — and I like that each entry doesn't have to be a separate note in a database.

I am having a few issues with the filtering system.

  1. I would like to be able to filter by the table header "co-op", using the values "Yes" or "No"
  2. I would also like to be able to filter by the table header "platform" using the values "Arcade", "Dreamcast" and "Steam" in the example below
  3. I am having trouble getting the "searchable" filter to work. I wouldn't mind searching by all of the headers, but "game" and "platform" are the most important.

Thank you. I appreciate your help!

Here is my example code.

columns:
  Game:
    nowrap: true
    searchable: true
  interest:
    type: enum
    enum:
      '1': '⭐️'
      '2': '⭐️⭐️'
      '3': '⭐️⭐️⭐️'
filters:
 High Interest: Number($row.interest) > 2
 Multiplayer: Number($row.players) > 1
 
pagination:
  page-size: 5
  page-sizes:
   - 5
   - 10
   - 20
style: |
   th {
     background-color: var(--color-base-50) !important;
     color: var(--color-base-70) !important;
   }
# hide-controls: true
hide-configuration: true
game platform status co-op players interest
Dead Connection Arcade Unplayed No 1 1
Gain Ground Arcade Unplayed 3
Gun force 2 / Geoforce Arcade Unplayed
Moonwalker Arcade Finished Yes
Ninja Baseball Bat Man Arcade Unplayed Yes 2
The Outfoxes Arcade Unplayed
Border Down Dreamcast Unplayed
Bust a Move 4 Dreamcast Unplayed 3
Chu Chu Rocket Dreamcast Unplayed 3
Dynamite Cop — co-op Dreamcast Unplayed 2
Columns Dreamcast Unplayed 1
Cyber Troopers Virtual On Dreamcast Unplayed 1
Guardian Heroes Dreamcast Unplayed 3
House of the Dead 2 Dreamcast Played 2
Ikaruga Dreamcast Unplayed Yes 2 2
Teenage Mutant Ninja Turtles: Shredder's Revenge Steam Unplayed Yes 3

[Enhancement] Do not follow align indicator

It seems like that table don't follow the :---, :---:' and ---:' align symbol in Reading mode.

| Id  | Number column | Date       | Rating | Color  | Formatted                        | Hidden             |   真假值    |
| --- | ------------: | ---------- | :----: | ------ | -------------------------------- | ------------------ | :------: |
| 1   |           500 | 2024-03-05 |   2    | red    | _**bold**_                       | Text you won't see |          |
| 2   |          1000 | 2024-04-10 |   5    | orange |                                  |                    |    no    |
| 3   |          1501 | 2024-03-15 |   1    | yellow | <font color="#ff0000">red</font> |                    |   yes    |
| 4   |         10000 | 2024-05-01 |   4    | green  | ~~strike~~                       |                    | whatever |
| 5   |         12000 | 2024-05-02 |   3    | blue   | ~~strike~~                       |                    |   yes    |
| 6   |         13000 | 2024-05-03 |   4    | purple | `{js} alert('123');`             |                    |    no    |

image

Doesn't work or a fundamental user error

I installed the plugin and tried to get it to work but failed.

I tried re-starting Obsidian. I copied your sample yaml code block. I tried selecting the entire table. I tried creating a small table. I tried going into Read mode.

Your documentation doesn't indicate how to invoke the controls. There is no command to invoke. There are no error messages in the JS console.

So, either it's user error or the plugin just doesn't work.

Here's my sample:

# hide-controls: true
hide-configuration: true
this is
dsdf fdsdfdfdf
a test dkd

Here is my Obsidian version:
About Obsidian
Version 1.5.8 (Installer 1.4.13)

Jerry

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.