What does the "l0 r0" nomenclature mean on SlickGrid cells?

Question

I'm trying to modify cells by adjusting the width of the "column", so I'm trying to figure out how SlickGrid classes and styles things.

I noticed each row has content like this:

<div class=​"slick-cell l0 r0">​…​</div>​
<div class=​"slick-cell l1 r1">​…​</div>​
<div class=​"slick-cell l2 r2">​…​</div>​
...

I thought maybe it was l for left (meaning column) and r for row, but both numbers change inside a single row. Anyone know what these classes are supposed to represent?

I see where it's set on line 1455 of slick.grid.js:

var cellCss = "slick-cell l" + cell + " r" + Math.min(columns.length - 1, cell + colspan - 1) +

I can't parse the intent of that math min statement though.

Answer 1

The l stands for "left" and r stands for "right". SlickGrid dynamically generates the .l<column> and .r<column> CSS rules based on column widths. The cells are absolutely positioned. The l<column> rules specify the left coordinate, while the r<column> rules specify the right coordinate. A typical cell will have both of them applied (ex. l4 r4 for column 5). This separation comes in handy for cells with colspan. For example, if cell 4 spans 2 cells, it will have CSS l4 r5 applied to it.

That said, you probably shouldn't mess with the grid's internals, and use the provided APIs instead :)