Tasklist checkboxes inside a table

[NikosAlexandris]

Dear all, is it possible to use the Tasklist checkboxes inside a table ?

| What ? | To Do|
|--------------|-------------|
| - [ ] Task 1 | Something|
| - [x] Done | Nothing |
| [ ] Task 2 | |
| [x] Done 2| |

which gives :

What ?	To Do
- [ ] Task 1	Something
- [x] Done	Nothing
[ ] Task 2
[x] Done 2

Or

|One|Two|
|--|--|
|- [ ]| More|
|- [x]| Even more?|

which gives

One	Two
- [ ]	More
- [x]	Even more?

and have it shown as outside the table, i.e.

• Something
• Done

?

Or is the only option something like

| Task           | Time required | Assigned to   | Current Status | Finished | 
|----------------|---------------|---------------|----------------|-----------|
| Object Cache   | > 5 hours  |  | in progress | <ul><li>- [x] item1</li><li>- [ ] item2</li></ul>
| Object Cache   | > 5 hours  |  | in progress | <ul><li>[x] item1</li><li>[ ] item2</li></ul>

which shows as

Task	Time required	Assigned to	Current Status	Finished
Object Cache	> 5 hours		in progress	item1 item2
Object Cache	> 5 hours		in progress	item1 item2

?

Finally,

| Selection |        |
| --------- | ------ |
| <li>- [ ] </li> |  |

which is presented as

Selection

(last two examples taken from https://stackoverflow.com/a/47344640/1172302)

[facelessuser]

@NikosAlexandris Python Markdown won't parse Markdown in what it considers block HTML elements unless they are at the root level of the document and you use the md_in_html extension. Because these are embedded in tables, that makes it even more difficult for Python Markdown. So yes, list syntax is a block element in Python Markdown so it won't get parsed in a table.

The short answer is pymdownx.tasklist will not work in the table syntax.

But fear not, there are ways to do what you want. I'm going highlight the easiest ways to do what you want. You can add classes and additional styling to manipulate the look.

Raw HTML

If you absolutely want lists, and real HTML checkboxes, you can do this with raw HTML. You may also want to style them so the user can't toggle them, but I leave that up to you.

### Raw HTML

| What ? | To Do|
|--------------|-------------|
| <input type="checkbox"> Task 1 | Something|
| <input type="checkbox" checked="checked"> Done | Nothing |
| <input type="checkbox"> Task 2 | |
| <input type="checkbox" checked="checked"> Done 2| |

| Task           | Time required | Assigned to   | Current Status | Finished | 
|----------------|---------------|---------------|----------------|-----------|
| Object Cache   | > 5 hours  |  | in progress | <ul><li><input type="checkbox" checked="checked"> item1</li><li><input type="checkbox"> item2</li></ul>
| Object Cache   | > 5 hours  |  | in progress | <ul><li><input type="checkbox" checked="checked"> item1</li><li><input type="checkbox"> item2</li></ul>

Raw HTML and Emoji

If we don't explicitly need lists, let's cut down on the HTML tags and use Emoji using pymdownx.emoji. This is probably the easiest and simplest solution.

### Emoji

| What ? | To Do|
|--------------|-------------|
| :green_square: Task 1 | Something|
| :white_check_mark: Done | Nothing |
| :green_square: Task 2 | |
| :white_check_mark: Done 2| |

| Task           | Time required | Assigned to   | Current Status | Finished | 
|----------------|---------------|---------------|----------------|-----------|
| Object Cache   | > 5 hours  |  | in progress | :white_check_mark: item1<br>:green_square: item2
| Object Cache   | > 5 hours  |  | in progress | :white_check_mark: item1<br>:green_square: item2

Combined Solution

You absolutely want lists, but like using the emoji? Okay, let's combine them.

### Raw HTML and Emoji

| What ? | To Do|
|--------------|-------------|
| :green_square: Task 1 | Something|
| :white_check_mark: Done | Nothing |
| :green_square: Task 2 | |
| :white_check_mark: Done 2| |

| Task           | Time required | Assigned to   | Current Status | Finished | 
|----------------|---------------|---------------|----------------|-----------|
| Object Cache   | > 5 hours  |  | in progress | <ul><li>:white_check_mark: item1</li><li>:green_square: item2</li></ul>
| Object Cache   | > 5 hours  |  | in progress | <ul><li>:white_check_mark: item1</li><li>:green_square: item2</li></ul>

[NikosAlexandris]

I was hoping for some programmatically more elaborated work and then less work of manual copy-pasting. Bothering is also that the emojis fully spelled-out, take quite some space in the case of wider tables :-/.

Anyway, thank you for your time and the examples! I have come quite some time ago, about, or exactly, to the same practice(s). Just a partial screenshot:

However, what I mostly find useful in your answer is the "You may also want to style them so the user can't toggle them, but I leave that up to you.". Specifically the first part "You may also want to style them .."!

Can I style them to match the "default" Material for MkDocs look ? I.e. to look exactly as the Completed and In Queue below ?

Besides ease-of-use, I am after a consequent look and feel in the documentation.

[facelessuser]

I was hoping for some programmatically more elaborated work and then less work of manual copy-pasting.

Well, I unfortunately don't have any. My extensions work within the confines of Python Markdown, and I can't write custom extensions for everyone's cases.

Can I style them to match the "default" Material for MkDocs look ? I.e. to look exactly as the Completed and In Queue below ?

Sure, for instance the checkmark icon that Material uses can be used via emoji with :material-checkbox-marked-circle: and the progress one is :material-progress-question:. You can search supported icons/emoji here: https://squidfunk.github.io/mkdocs-material/reference/icons-emojis/?h=emoji.

You can choose how to target them with CSS, as a very simple example, I use attr_list extension to apply a class, though there are other approaches as well.

### Emoji

| What ? | To Do|
|--------------|-------------|
| :material-checkbox-marked-circle:{.blank} Task 1 | Something|
| :material-checkbox-marked-circle:{.checked} Done | Nothing |
| :material-checkbox-marked-circle:{.blank} Task 2 | |
| :material-checkbox-marked-circle:{.checked} Done 2| |

| Task           | Time required | Assigned to   | Current Status | Finished | 
|----------------|---------------|---------------|----------------|-----------|
| Object Cache   | > 5 hours  |  | in progress | :material-checkbox-marked-circle:{.checked} item1<br>:material-checkbox-marked-circle:{.blank} item2
| Object Cache   | > 5 hours  |  | in progress | :material-checkbox-marked-circle:{.checked} item1<br>:material-checkbox-marked-circle:{.blank} item2

<style>
.twemoji.checked svg {
    color: #00e676;
}
.twemoji.blank svg {
    color: rgba(0, 0, 0, 0.07);
}
</style>

That is probably all the time I can spend on this. I wish you luck though. If others want to chime in they can.

[NikosAlexandris]

This last style bit is a great addition! Thank you @facelessuser.