DataTable.BodyView.Formatters Class
yui3/src/datatable/js/formatters.js:17
Registry of function producing cell formatting functions.
Allows for names to be used in the column
definition formatter
property:
{key:"myColumn", formatter:"date"}
These functions are not meant to be used directly. Instead, they will be
automatically called when their names are used as values for the formatter
property in a columnd definition.
They will be called just once per rendering cycle and will receive
the column configuration. They are expected to return a function that will
then be called once per row and will do the actual formatting.
They are expected to do all the preparatory once-per-render work
so that the actual formatting function doesn't need to repeat it.
Index
Methods
- _createTFootNode
- _date static
- boolean static
- button static
- currency static
- date static
- email static
- getClassName
- initializer
- link static
- localDate static
- localDateTime static
- localTime static
- lookup static
- number static
- render
Properties
Methods
_createTFootNode
()
Node
protected
Creates the <tfoot>
node that will store the footer rows and cells.
Returns:
_date
-
format
Returns a date formatting function based on the given format.
Parameters:
-
format
StringThe format spec definition.
Returns:
A formatter function that formats numerical data as currency.
boolean
-
col
Returns a formatter function that returns the texts "true"
or "false"
and assigns the CSS classNames yui3-datatable-true
or yui3-datatable-false
based on the value of the cell.
If either a booleanLabels
configuration object is defined for the column
or a booleanLabels
configuration attribute is defined for the datatable,
the formatter will use the values for the properties true
or false
of either of those objects as the text to show.
It returns null
s or undefined
s unchanged so that the emptyCellValue
configuration attribute will eventually apply.
{key:"active", formatter: "boolean", booleanLabels: {
"true": "yes",
"false": "no"
}}
Parameters:
-
col
ObjectThe column definition.
Returns:
A formatter function that formats boolean data.
currency
-
col
Returns a formatter function that formats values as currency using the Number.format method. It looks for the format to apply in the currencyFormat property of the column or in the currencyFormat attribute of the whole table.
{key: "amount", formatter: "currency", currencyFormat: {
decimalPlaces:2,
decimalSeparator: ",",
thousandsSeparator: ".",
suffix: "€"
}}
See Number.format for the available format specs.
Anything that cannot be parsed as a number will be returned unchanged.
Applies the CSS className yui3-datatable-currency
to the cell.
Parameters:
-
col
ObjectThe column definition.
Returns:
A formatter function that formats numerical data as currency.
date
-
col
Returns a date formatting function. It looks for the format to apply in the dateFormat property of the column or in the dateFormat attribute of the whole table.
{key: "DOB", formatter: "date", dateFormat: "%I:%M:%S %p"}
See Date.format for the available format specs.
Anything that is not a date is returned unchanged.
Applies the CSS className yui3-datatable-date
to the cell.
Parameters:
-
col
ObjectThe column definition.
Returns:
A formatter function that formats dates.
email
-
col
Returns a function that produces email links. If the column definition contains a property linkFrom it will use the value in that field for the link, otherwise, the same column value will be used for both link and text.
{key: "contact", formatter: "email", linkFrom: "contactEmail"}
It will use the respective emptyCellValue column configuration attribute for each of the value and the link if either is empty. If the link value is still empty, it will return the value with no link.
Applies the CSS className yui3-datatable-email
to the cell.
Parameters:
-
col
ObjectThe column definition.
Returns:
A formatter function that adds a mailto: link to the value.
getClassName
-
token
Returns the generated CSS classname based on the input. If the host
attribute is configured, it will attempt to relay to its getClassName
or use its static NAME
property as a string base.
If host
is absent or has neither method nor NAME
, a CSS classname
will be generated using this class's NAME
.
Parameters:
-
token
String multipleAny number of token strings to assemble the classname from.
Returns:
initializer
-
config
Initializes the instance. Reads the following configuration properties:
host
- The object to serve as source of truth for column info
Parameters:
-
config
ObjectConfiguration data
link
-
col
Returns a function that produces links. If the column definition contains a property linkFrom it will use the value in that field for the link, otherwise, the same column value will be used for both link and text.
{key: "company", formatter: "link", linkFrom: "webSite"}
It will use the respective emptyCellValue column configuration attribute for each of the value and the link if either is empty. If the link value is still empty, it will return the value with no link.
Applies the CSS className yui3-datatable-link
to the cell.
Parameters:
-
col
ObjectThe column definition.
Returns:
A formatter function that adds a link to the value.
localDate
()
Function
static
Returns a date-only (no time part) formatting function using the current locale.
{key: "DOB", formatter: "localDate"}
Anything that is not a date is returned unchanged.
Applies the CSS className yui3-datatable-date
to the cell.
Returns:
A formatter function that formats dates.
localDateTime
()
Function
static
Returns a date formatting function using the current locale.
{key: "DOB", formatter: "localDateTime"}
Anything that is not a date is returned unchanged.
Applies the CSS className yui3-datatable-date
to the cell.
Returns:
A formatter function that formats dates.
localTime
()
Function
static
Returns a time-only (no date part) formatting function using the current locale.
{key: "startTime", formatter: "localTime"}
Anything that is not a date is returned unchanged.
Applies the CSS className yui3-datatable-date
to the cell.
Returns:
A formatter function that formats dates.
lookup
-
col
Returns a formatter function that returns texts from a lookup table based on the stored value.
It looks for the translation to apply in the lookupTable property of the column in either of these two formats:
{key: "status", formatter: "lookup", lookupTable: {
0: "unknown",
1: "requested",
2: "approved",
3: "delivered"
}},
{key: "otherStatus", formatter: "lookup", lookupTable: [
{value:0, text: "unknown"},
{value:1, text: "requested"},
{value:2, text: "approved"},
{value:3, text: "delivered"}
]}
Applies the CSS className yui3-datatable-lookup
to the cell.
Parameters:
-
col
ObjectThe column definition
Returns:
A formatter function that returns the text
associated with value
.
number
-
col
Returns a formatter function that formats values using the Number.format method. It looks for the format to apply in the numberFormat property of the column or in the numberFormat attribute of the whole table.
{key: "weight", formatter: "number", numberFormat: {
decimalPlaces:2,
decimalSeparator: ",",
thousandsSeparator: ",",
suffix: "kg"
}}
See Number.format for the available format specs.
Anything that cannot be parsed as a number will be returned unchanged.
Applies the CSS className yui3-datatable-number
to the cell.
Parameters:
-
col
ObjectThe column definition.
Returns:
A formatter function that formats numerical data as currency.
render
()
FooterView
chainable
Creates the <tfoot>
Node and inserts it after the <thead>
Node.
Returns:
The instance
Properties
TFOOT_TEMPLATE
String
HTML templates used to create the <tfoot>
containing the table footers.
Default: '<tfoot class="{className}"/>'