Enable styling row in Base based on it's row number

Feature requests
1

Use case or problem

I would like to be able to style a row in a Base using CSS based it’s row number. There are several use cases for this:

  1. Show a row number for each row.
  2. Style even/odd rows differently (ex striped rows).

Proposed solution

Add a “row number” attribute to Base rows.

Right now the HTML for a row in a table view in a base looks something like this:

<div class="bases-tr" style="top: 0px; width: 903px;">

I would like to propose that an attribute, such as data-index or data-row-number, is added to the HTML so it can be targeted using CSS.

<div data-index="1" class="bases-tr" style="top: 0px; width: 903px;">

Current workaround (optional)

There is no workaround for showing a row number for each row, because rows are dynamically added/removed from the DOM for performance reasons, you cannot show the actual row number, only the row number that is currently visible on the screen, which is not accurate.

For striped rows, you can use a repeating gradient that matches the row height to achieve the same effect, see this comment for an example.

Related feature requests (optional)

2

For the striped rows, I use the following CSS:

.bases-tr:nth-of-type(even) {
background: var(–background-secondary);
}

3

If you scroll slowly with your solution, you’ll see that a given row will change colors while you’re scrolling.

This happens because rows are dynamically loaded/unloaded from the DOM for performance, so the elements targeted by :nth-of-type(even) will change while elements are scrolled out of view and then removed.

The repeating gradient solution that I suggested as a workaround does not have this problem.

4

Probably my macbook is to fast to see this :wink: