Support checkboxes in tables

[emtaxes]

+1 in the row of people interested in this - tables are such a neat way to track progress, especially on longer projects

[Mat_35]

Very beatiful

[domportera]

big agree, this would be too huge for me for daily planning

[Hemanti]

+1

I suggest to make it even more generic. I often miss the possibility to have two checkboxes in a row.

[Johan_87]

This is my extremely and stupidly complex workaround to display checkbox inside callouts that ressemple tables.
I used Modular CSS Layout snippets ( Getting Started - Modular CSS Layout (efemkay.github.io)) and created callout with no design and in columns.

Then the only think to do next is to mask that thing to your needs, i created my css snippets that override some of the features of Modular CSS Layout (if you know css, this is not that difficult to do). So i created a callout for each checkbox (and other content) and distributed in a specific way (each cell in the “table” is a callout, yeah crazy). Something like this:

In display looks like a table, that is the result i wanted

Now, the problem is still that this is not easy to create in the workflow, since it uses a los of code

But for specific cases like using it in templates where you rarely change anything, this solution is a godsend.
This also has the advantage that don’t use any plugin, just css, so you can be sure that this is not going to broke in a new update if you don’t mess with the css (and also if you do not change your theme, but i rarely do that).
So that it is, it looks good in my weekly reviews, do you have ideas of other cases to apply this?

[domportera]

@QuantumNeurotechno’s answer is the closest I’ve gotten to this functionality, so I decided to spruce it up a bit with a custom CSS snippet!

checkboxtable.css (1.7 KB)

To use this, just make sure your fontmatter has the cssclass: checkboxtable

I also added in a little quality of life improvement to editing these tables

So your linked markdown snippet wont make the table all wonky

I’ve never done CSS like this before so please let me know if it works for you! and thanks a million to Quantum for the immense help to make this possible

[JocelynTuohy]

+1: Please give checkboxes in tables native support!

[Harminder]

I would love to see checkboxes in tables added to Obsidian, as it would be a great way to track progress, especially on longer projects.

[renard]

+1: This would be really useful for a lot of note taking styles.

[gafsiqueira]

Hi, thanks for your answer.

But I think I do not get how you use this. I pretty dumb with this css stuff lol

Could you help on how to build a table using you example?

[ohreallyhmmm]

+1: it would be great if Obsidian recognised checkboxes in tables (and everyelse too - including inline (sorry if this is hijacking this thread)).

E.g.

table heading 1	table heading 2	table heading 3
- [ ] item	note1	note2

---

Also this:

HeadingExample - [ ] checkbox item

With this behaviour:

HeadingExample - [x] checkbox item

---

Also this:
TextExample - [ ] checkbox item

With this behaviour:
TextExample - [x] checkbox item

[tbrc]

I support this feature! Just made my account to respond to this thread!

[eujene]

would love this it be implemented natively!

[DaveL]

Definitely need this. I’m having to fake it with css and embedded html is far from pleasant.

[brooks]

Hi hello!

I’d love to see this implemented as well.

[howard000oneil]

I ran into a case where i need to mark notes to keep track and making MOCs. Using dataviewjs i can do this. However the checkbox will be cleared once load a new page, need to pin the dataview note and open marked note into new tab.

dv.table(["File"], 
    dv.pages('"Main/Permanents"')
        .where(b => cond_f(b.file.name))
        .where(b => check_orphan(b.file.inlinks))
        .sort(b => b.file.inlinks.length, 'desc')
        .map(b => ["- [ ] " + b.file.link]).limit(LIMIT))

More or my function implementation for someone curious

const LIMIT = 99999

const cond_arr = [
    "SR -", "OP -", 
    "PL -", "TS -", "BO -", "VC -",
    "HS -", "HCO -",
    "CO -", "HMOC",
    "MOC -", "MH -"
]

function cond_f(filename) {
    for (const idx in cond_arr) {
        const cond = cond_arr[idx]
        if (filename.toUpperCase().startsWith(cond))
            return false
    }
    return true
}

function check_orphan(inlinks) {
    // console.log(JSON.parse(JSON.stringify(inlinks)))
	// console.log(JSON.parse(JSON.stringify(inlinks)).values.length)

    const arr = JSON.parse(JSON.stringify(inlinks)).values
    let count = 0
    for (let i = 0; i < arr.length; i++) {
        const f = arr[i]

        if (
            f.path.toUpperCase().includes("BO - ")
            || f.path.toUpperCase().includes("MH - ")) {
                count += 1
            }
    }

    if (count == inlinks.length)
        return true

    return false
}

[nutellacrepe]

Yes, checkboxes-in-tables is the best feature of AirTable, imo (although I stopped using AirTable because of its other limitations…)

[Kani]

This feature is definitely missing!

[Jasen]

Missing it too.
But you could use also symbols: ☐ for “☐” and ☒ for “☒”
There is also cute ☑ for “”, but I can’t find its unchecked pair…

[knoll]

I can’t get any of the css solutions to work. Would love if there was some native support for this feature