React Data GridTime cell type
Use the time cell type to display, format, and validate values as times. The time cell type uses Moment.js as a time formatter.
Usage
To use the time cell type, set the type: 'time'
option in the columns
array or the cells
function.
The time cell uses Moment.js (opens new window) as the time formatter, therefore you must add the following required dependency:
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
All data entered into the time-typed cells is eventually validated against the default time format - h:mm:ss a
, which translates to, for example, 9:30:00 am
unless another format is provided as the timeFormat
.
If you enable the correctFormat
configuration option, the values will be automatically formatted to match the desired time format.
TIP
By default, the values entered into the time-type column are not validated, so if you want them to display in the proper format, remember to call hot.validateCells()
after the table initialization.
Basic example
Car | Model | Registration time | Price |
---|---|---|---|
Mercedes | A 160 | 11:00:00 pm | $ 6,999.95 |
Citroen | C4 Coupe | 10:30:00 am | $ 8,330.00 |
Audi | A4 Avant | 8:00:00 pm | $ 33,900.00 |
Opel | Astra | 11:00:00 pm | $ 7,000.00 |
BMW | 320i Coupe | 11:00:00 pm | $ 30,500.00 |
Car | Model | Registration time | Price |
---|
Related articles
Related guides
Related API reference
- Configuration options:
- Core methods:
- Hooks:
There is a newer version of Handsontable available. Switch to the latest version ⟶