Deadline Table: How to show that the deadline has passed?

Help
1

Hi!
I’ve found a post that helped me in obtaining a table for showing the remaining days for a deadline.
But how can I show that the deadline has passed? Maybe also using a different formatting than the other deadlines

Thanks a lot in advance

2

Could you share some of the code you’re currently working with so that folks can have an entry point to helping you out?

Without some idea of what you’re already doing, this question is too vague to get useful answers.

3

Sure!
This is the query, let me know if I can give further explainations
(scadenza mean deadline, tipo and Cosa are just for explaining what’s the deadline refer to)

```dataview
TABLE dateformat(scadenza, "yyyy.MM.dd") AS Scadenza, tipo AS Cosa, (scadenza - date(today)) as "Giorni rimanenti"
WHERE scadenza
SORT (scadenza - date(today)) ASC
4

The following is untested, but I think it should work. The idea is to instead of doing the deadline calculation in the sort and/or column view, we make it into a field by using FLATTEN, and then we can also do WHERE clauses on it.

```dataview
TABLE dateformat(scadenza, "yyyy.MM.dd") AS Scadenza, tipo AS Cosa, daysToDeadline as "Days past deadline"
FLATTEN (scadenza - date(today)) as daysToDeadline
WHERE scadenza AND daysToDeadline < 0 
SORT daysToDeadline ASC
```

You might want to add better text and names to stuff (or change sorting), but you get the gist of the idea.

5

Thanks a lot: I’ll check your solution as soon as possible

6

It works and is nice to see (anyway I’ll try to make some modification for my tastes :grinning: )
Is there any way to show (maybe even with a color) how many days past the deadline?

7

Here is a sample thingy, showing how to color based on a number:

```dataview
TABLE WITHOUT ID 
  tmp[0] as Thingy, 
  "<span style='color: " + color + "'>" + tmp[1] + "</span>" as Deadline
FLATTEN list(
 [ "OK", 5 ],
 [ "Today", 0 ],
 [ "Yesterday", -1 ],
 [ "Many days ago", -5 ]
) as tmp
FLATTEN
  choice(tmp[1] > 0, "green",
   choice(tmp[1] =  0, "yellow",
    choice(tmp[1] = -1, "orange",
     choice(tmp[1] < -1, "red", "blue")))) as color
WHERE file.name = this.file.name
```

Put that into a note of its own, and switch to live preview or reading view, and watch the magic unfold. :slight_smile:

One could also try using background-color: instead of color:. Either of these will however only just color the deadline text. If you want to color the entire cell (or similar), you’ll need to get a little more creative and use CSS snippets, and tagging the cell according to your choices.

Some other comments related to my test query:

  • I’ve used a list as base input, so you need to replace the FLATTEN list ... (and WHERE ... clause), with something which make sense in your case. And that also goes for using tmp[1], where you would rather use `daysToDeadline``
  • The syntax for choice() is choice(test, true, false), which I’ve daisy chained, so if you want to add or remove options, there are two things you need to watch out for:
    • Change the number of ) at the end to match the number of choices.
    • Keep the number range consistent, so that not one of the earlier choices eliminates a later option. In other words, keep the options in a numerical sorted order, like in my test query
8

To achieve this one should change the query to something like:

```dataview
TABLE WITHOUT ID 
  tmp[0] as Thingy, 
  "<span class='" + cellClass + "'>" + tmp[1] + "</span>" as Deadline
FLATTEN list(
 [ "OK", 5 ],
 [ "Today", 0 ],
 [ "Yesterday", -1 ],
 [ "Many days ago", -5 ]
) as tmp
FLATTEN
  choice(tmp[1] > 0, "cellOK",
   choice(tmp[1] =  0, "cellWARN",
    choice(tmp[1] = -1, "cellLATE",
     choice(tmp[1] < -1, "cellVERYLATE", "")))) as cellClass
WHERE file.name = this.file.name
```

And then install some CSS-snippet like the following into vault/.obsidian/snippets/cellColors.css, and then go to Settings > Appearance > CSS Snippets and enable the “cellColors.css”:

.markdown-rendered .dataview td:has(.cellOK) {
  background-color: var(--color-green);
  color: black;
}

.markdown-rendered .dataview td:has( .cellWARN ) {
  background-color: var(--color-yellow);
  color: black;
}
.markdown-rendered .dataview td:has( .cellLATE ) {
  background-color: var(--color-orange);
  color: black;
}
.markdown-rendered .dataview td:has( .cellVERYLATE ) {
  background-color: var(--color-red);
  color: black;
}

I’m not the best in color stuff, but using the Minimal theme, and the code above, my list now shows up as:

image
image855×228 8.93 KB

Note that this trick of doing td:has(.className) is a universal trick where we now can target a higher level element, whilst using a lower element to select the former. Thusly, we can change table rows and/or cells, using some marker within the cell. This does require for a recent installer version above 1.0.0…