ColumnContext

This context class manages the configuration and defines the DSL for exactly one column.

The following aspects can be configured:

• the title

• an (optional) Lens to expose a type safe access to the column's data

• the styling

• the content rendering (default is the String representation of the data) for specific formatting or individual UIs like inputfields, selection elements, icons and stuff like that.

• the header by HeaderContext

• sizing aspects

• sorting aspects (initial sorting direction or disable sorting and special sorting for a type, think of some date types or even combined data)

A column definition looks like this:

column(title = "Id", {
}) {
     lens(idLens + Formats.intFormat)
     width { minmax("80px") }
}

Of course such column also gets meta information injected, so the styling for only one specific column based upon the index, the selection, the sorting or some item based value is possible:

column(title = "Id", styling = {  (index, state) ->
     if(state.sorting) {
         border {
             type { solid }
             width { fat }
             color { lime }
         }
     }
}) {
     //
}

For the customization of the content, there are also some parameters injected into the `content` context, that provide the following features:

• the stateful index of the row: This can be used to adopt some styling of inner elements (or components!) as shown before

• the String based content representation as a store: This can be useful if only the HTML structure within a column should be other than just a `td`, but the content representation itself is sufficient.

• and finally the type safe substore of the whole row: This can be used to combine different data properties of the model into one column.

Example for using the IndexedValue of StatefulItem to mimic the odd-even styling of the rows within an integrated sub component:

content { rowIndex, _, rowStore ->
     inputField({
         if(rowIndex.index % 2 == 1) {
             background { color { gray100 } }
             color { gray700 }
         } else {
             background { color { gray300 } }
             color { gray900 }
         }
     }, value = rowStore.sub(L.Person.name)) {
         size { small }
     }
 }

Example for adopting the content of a cell based upon the pure String representation

column(title = "language") {
     lens(L.Person.language) // we must inject a ``Lens`` in order to enable the automatic conversion!
     content { _, cellStore, _ ->
         cellStore.data.render { if(it.toLowerCase() == "kotlin") em { it } else it }
     }
}

Example for using the dynamic content to combine two properties of the model:

column(title = "name") {
     content { _, _, rowStore ->
         rowStore.let { person ->
             val prename = person.sub(L.Person.prename)
             val surname = person.sub(L.Person.surname)
             prename.data.combine(name.data) { pre, sur -> "$pre $sur }.asText()
         }
     }
}