Grid Column
<esp-grid-column>
Defines grid columns for the esp-grid. The grid pulls a JSON dataset, then uses column definitions to map data to table cells.
Slots
<esp-grid-column> has a slot:
Default
Grid column has a default slot for a template to use when rendering the row. For example, use data from three fields to build an email link, and add a button in another column:
Attributes
<esp-grid-column> has the following attributes:
field-name
field-name has a default value of "".
The name of the field in the dataset to get the value from.
header
header has a default value of "".
The header text of the grid column.
sortable
sortable has a default value of false.
Whether or not the user can sort on this column.
sort-field
sort-field has a default value of "".
If the column is sortable it will sort on the field-name
by default. Define a sort-field to specify a different
field to sort on. Both these columns sort by last name:
sort-order
sort-order has a default value of "".
If sorting on this column, the direction to sort in. By default, the grid will sort on the first column with a sort-order specified.
sort-type
sort-type has a default value of "string".
Determines how to parse the value in the field for sort comparisons.
text-align
text-align has a default value of "left".
How to align text in the column.
width
width has a default value of "".
The width of the grid column. Set to 0 for the column width to be as small as the value inside will allow.
pin
pin has a default value of "".
Pin the column to the left or right side of the grid so it
remains visible while scrolling horizontally. Pinned columns
should have an explicit width set when multiple columns are
pinned to the same side, so the grid can compute proper offsets.
grow
grow has a default value of false.
Allow the column to grow and fill remaining horizontal space.
The column keeps its declared width as a minimum but expands
to absorb any extra room. Multiple growable columns share the
extra space equally.