Observable Inputs

Announcements
41

The Search input matches search terms on word boundaries, and only looks for strings that begin with any of the entered terms. Here is a simple example (try adding and removing “0” after the “\b”):

1 Like
42

Following up on:

Ongoing discussion of how best to do compound inputs here

So you can only script and combine other UI controls if they do things ‘a certain way’. If they raise events in the wrong place it can go wrong. It’s hard to remember all the rules, so I have tried to capture what they are with a set of guidelines and an automated linter for a subset of them.

2 Likes
43

It’d be nice to support multiple search strategies, say a fuzzier one that matches the characters in order but allowing anything in between (e.g., [abc] would match “abercrombie” but not “baccalaureate”)… You can implement it yourself by using the filter option on Search.

1 Like
44

A fuzzy search would be nice. This is another of the innovations from the TextMate text editor (itself inspired by the Quicksilver launcher tool) that was later adopted widely, e.g. by Github’s “go to file” tool.

Here is TextMate’s original implementation: https://github.com/textmate/textmate/blob/master/Frameworks/text/src/ranker.cc

Here’s a javascript implementation of a similar algorithm: https://github.com/mattyork/fuzzy

Also see: https://github.com/jhawthorn/fzy/blob/master/ALGORITHM.md

1 Like
45

Is it possible to not bring in the default Observable styles when embedding via Runtime (javascript)?

I’m having a hard time overriding these:
image

1 Like
46

Hi, will there be any new additions to the inputs supported, I was using the color picker from the “The Grand Native Inputs Bazaar” It actually uses the native picker input that lets pick color from the webpage, also can the checkboxes example have a different example, as landing on the page and searching for color lands there but its a checkbox :frowning:

1 Like
47

Yes, and in fact we’ve already landed a number of improvements and new inputs since launch. You can track and vote on issues here:

Here’s the color picker issue specifically:

As a workaround, try:

viewof color = Text({type: "color"})
2 Likes
48

Is there an easy way to add background colour to a column.
For example the column AY/ATT has a darker gray than the other columns.
image

49

this seems to work with Observable tables, where nth-child is a column number , for example,

html`<style>
  td:nth-child(2) {
    background-color: rgba(211,211,211,0.5);
  }
  td:nth-child(4) {
    background-color: rgba(211,211,211,0.5);
  }
  td:nth-child(6) {
    background-color: rgba(211,211,211,0.5);
  }
  td:nth-child(8) {
    background-color: rgba(211,211,211,0.5);
  }
</style>
`

more on

1 Like
50

If you want them to alternate you can also use nth-child(even) or nth-child(odd), or if you want them to cycle in threes or whatever you can use e.g. nth-child(3n + 1). See :nth-child() - CSS: Cascading Style Sheets | MDN

3 Likes
51

I just pushed a new release with a dozen bug fixes and improvements:

  • Table iterates over as few rows as possible, improving performance. Thanks, @domoritz! #123
  • Table cells are again 22px tall, as intended. #126
  • Table’s scrollbar is attached to narrow tables and only appears when needed. #125
  • Table supports a fixed height option and a maxWidth option. #96 #85
  • Table supports a multiple option, which if false uses radio elements to select one row. #129
  • Range autocorrects invalid values; the validate option is now ignored.
  • Range correctly handles the step and transform options, avoiding floating point madness. #120 #121
  • Range’s format defaults to formatTrim instead of formatNumber to avoid loss of precision.
  • Text validates the value on initialization and set. #111
  • Button supports a required option, allowing the initial value to be undefined. #112
  • Search supports a required option; if true, the value is empty array when empty. #130

Thanks for all the great feedback and suggestions. :pray:

7 Likes
52

Hey Mike!

Is there any example on how you go about doing this?
I’m trying to align a few tables together and would like to specify a discreet width per column.

Thanks!

53

For table column widths, you can specify them this way:

table = Inputs.table(
  penguins.map(d => ({island: d.island, mass: d.body_mass_g})), 
  {
    width: {
      island: 150,
      mass: 100
    }
  })

See it in action here:

4 Likes