Column Class

Module: Table
Defined In: addon/classes/Column.js:327

Constructor

Column
(
  • options
)

Defined in addon/classes/Column.js:327

Parameters:

Show:
serializeContentObjects
(
  • objects
)
Array

Defined in addon/-private/sync-array-proxy.js:46

Serialize objects before they are inserted into the content array

Parameters:

Returns:

Array
serializeSyncArrayObjects
(
  • objects
)
Array

Defined in addon/-private/sync-array-proxy.js:56

Serialize objects before they are inserted into the sync array

Parameters:

Returns:

Array

align

String

Defined in addon/classes/Column.js:122

Text alignment. Possible values are ['left', 'right', 'center']


Default: 'left'

ascending

Boolean

Defined in addon/classes/Column.js:45


Default: true

breakpoints

Array

Defined in addon/classes/Column.js:157

An array of media breakpoints that determine when this column will be shown

If we have the following breakpoints defined in app/breakpoints.js:

  • mobile
  • tablet
  • desktop

And we want to show this column only for tablet and desktop media, the following array should be specified: ['tablet', 'desktop'].

If this property is null, undefined, or [], then this column will always be shown, regardless of the current media type.

cellClassNames

String | Array

Defined in addon/classes/Column.js:255

Class names to be applied to all cells of this column

cellComponent

String

Defined in addon/classes/Column.js:225

Component name for the column cells. This component is automatically passed row, column, and value variables, and you can specify a valuePath to set what property the value is set to.

cellType

String

Defined in addon/classes/Column.js:198

Type of cell component

You can create your own cell types by running the blueprint: ember g cell-type my-cell-type

This will generate a component for you which represents the <td> cells in the column. If you want to apply custom actions to the td, or do some custom styling of the td with classNameBindings, all of that is available to you in this component.

You can then specify the custom type you created as a string here, to use it.


Default: 'base'

classNames

String | Array

Defined in addon/classes/Column.js:247

Class names to be applied to header and footer cells of this column

columnId

String private

Defined in addon/classes/Column.js:272

Column's unique ID.

component

String

Defined in addon/classes/Column.js:217

Component name for the column

draggable

Boolean

Defined in addon/classes/Column.js:77

Whether the column can be reorder via drag and drop.

CSS Classes:

  • is-draggable
  • is-dragging
  • is-drag-target
    • drag-left
    • drag-right


Default: false

droppable

Boolean

Defined in addon/classes/Column.js:93

Whether the column is a valid drop target.


Default: true

format

Function

Defined in addon/classes/Column.js:263

A format function used to calculate a cell's value. This method will be passed the raw value if valuePath is specified.

hidden

Boolean

Defined in addon/classes/Column.js:24

Whether the column can is hidden.

CSS Classes:

  • is-hidden


Default: false

hideable

Boolean

Defined in addon/classes/Column.js:12

Whether the column can be hidden.

CSS Classes:

  • is-hideable


Default: true

isGroupColumn

Boolean private

Defined in addon/classes/Column.js:290

isHidden

Boolean

Defined in addon/classes/Column.js:283

True if hidden or responsiveHidden is true.

isVisibleGroupColumn

Boolean private

Defined in addon/classes/Column.js:297

label

String

Defined in addon/classes/Column.js:114

Column header label


Default: ''

minResizeWidth

Number

Defined in addon/classes/Column.js:130

The minimum width (in px) that this column can be resized to.


Default: 0

parent

Column

Defined in addon/classes/Column.js:138

The parent column (or group) for this sub-column. This will only have a value if this column is a sub-column. Note: this doesn't update if you move this sub-column to another parent after instantiation.

resizable

Boolean

Defined in addon/classes/Column.js:64

Whether the column can be resized.

CSS Classes:

  • is-resizable
  • is-resizing


Default: false

responsiveHidden

Boolean

Defined in addon/classes/Column.js:36

If true, this column has been hidden due to the responsive behavior


Default: false

sortable

Boolean

Defined in addon/classes/Column.js:52

Whether the column can be sorted.

CSS Classes:

  • is-sortable


Default: true

sorted

Boolean

Defined in addon/classes/Column.js:102

Whether the column is sorted.

CSS Classes:

  • is-sorted


Default: false

subColumns

Array

Defined in addon/classes/Column.js:149

An array of sub columns to be grouped together

syncArray

Array

Defined in addon/-private/sync-array-proxy.js:8

The model that will be synchronized to the content of this proxy

type

String

Defined in addon/classes/Column.js:178

Type of column component

You can create your own column types by running the blueprint: ember g column-type my-column-type

This will generate a component for you which represents the <th> element for the column. If you want to apply custom actions to the th, or do some custom styling of the th with classNameBindings, all of that is available to you in this component.

You can then specify the custom type you created as a string here, to use it.


Default: 'base'

valuePath

String

Defined in addon/classes/Column.js:235

visibleSubColumns

Array private

Defined in addon/classes/Column.js:306