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
Basic example
Related articles
- Related guides
- Related API reference

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

{
  "name": "handsontable",
  "version": "1.0.0",
  "description": "",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "hyperformula": "^2.4.0",
    "handsontable": "15.0",
    "@handsontable/react-wrapper": "15.0"
  },
  
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Handsontable</title>
  </head>

  <body>
    <noscript> You need to enable JavaScript to run this app. </noscript>
    <div id="root"></div>
  </body>
</html>

import React, { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./styles.css";
import ExampleComponent from "./ExampleComponent";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <ExampleComponent />
  </StrictMode>
);

import React from "react";
import { useEffect, useRef } from 'react';
import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.css';

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  const hotRef = useRef(null);

  useEffect(() => {
    const hot = hotRef.current?.hotInstance;

    hot?.validateCells();
  });

  return (
    <HotTable
      ref={hotRef}
      data={[
        ['Mercedes', 'A 160', 1332284400000, 6999.95],
        ['Citroen', 'C4 Coupe', '10 30', 8330],
        ['Audi', 'A4 Avant', '8:00 PM', 33900],
        ['Opel', 'Astra', 1332284400000, 7000],
        ['BMW', '320i Coupe', 1332284400000, 30500],
      ]}
      colHeaders={['Car', 'Model', 'Registration time', 'Price']}
      columnSorting={true}
      height="auto"
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
      columns={[
        {
          type: 'text',
        },
        {
          // 2nd cell is simple text, no special options here
        },
        {
          type: 'time',
          timeFormat: 'h:mm:ss a',
          correctFormat: true,
        },
        {
          type: 'numeric',
          numericFormat: {
            pattern: '$ 0,0.00',
          },
        },
      ]}
    />
  );
};

export default ExampleComponent;

import { useEffect, useRef } from 'react';
import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.css';

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  const hotRef = useRef(null);

  useEffect(() => {
    const hot = hotRef.current?.hotInstance;

    hot?.validateCells();
  });

  return (
    <HotTable
      ref={hotRef}
      data={[
        ['Mercedes', 'A 160', 1332284400000, 6999.95],
        ['Citroen', 'C4 Coupe', '10 30', 8330],
        ['Audi', 'A4 Avant', '8:00 PM', 33900],
        ['Opel', 'Astra', 1332284400000, 7000],
        ['BMW', '320i Coupe', 1332284400000, 30500],
      ]}
      colHeaders={['Car', 'Model', 'Registration time', 'Price']}
      columnSorting={true}
      height="auto"
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
      columns={[
        {
          type: 'text',
        },
        {
          // 2nd cell is simple text, no special options here
        },
        {
          type: 'time',
          timeFormat: 'h:mm:ss a',
          correctFormat: true,
        },
        {
          type: 'numeric',
          numericFormat: {
            pattern: '$ 0,0.00',
          },
        },
      ]}
    />
  );
};



ReactDOM.render(<ExampleComponent />, document.getElementById("example1"));

<script src="https://cdn.jsdelivr.net/npm/handsontable@15.0/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@15.0/styles/handsontable.min.css" /> 
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@15.0/styles/ht-theme-main.css" /> 
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@15.0/styles/ht-theme-horizon.css" /> 
<script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/react-wrapper@15.0/dist/react-handsontable.min.js"></script>
<script src="https://handsontable.com/docs/scripts/fixer.js"></script>

<div id="example1" class="hot ht-theme-main-dark-auto "></div>

Cell type

React Data GridTime cell type

Usage

Basic example

Related articles

Related guides

Related API reference