Date values not displaying on Ag grid table

Joca 0
Viewed 37

I am trying to have date values display in an ag grid table. The date values are displaying in other tables that have a name property in them, but it is not displaying in one table that does not display in this table.

enter image description here

These are my codes below. I tried mapping the response from the data but to no avail

    useEffect(() => {
      getData();
    }, []);

    const getData = () => {
      axios.get(apiUrl).then(res => {
      res?.data.map(n => n.startDate);
      setTableData(res.data);
     }).catch(error => {
     console.warn(error, 'api-error');
    });
   };

JSX

   return(
      <div className="ag-theme-alpine" style={{ height: '600px' }}>
      <AgGridReact
        rowData={tableData}
        defaultColDef={defaultColDef}
        columnDefs={columnDefs}
        onGridReady={onGridReady}
        pagination={true}
        paginationPageSize={12}
        enableBrowserTooltips={true}
      ></AgGridReact>
    </div>
   )
ag-grid-react ag-grid reactjs
1 Answers

Please see a simple plunker with AG Grid React containing the code snippet from below. In this plunker example, onGridReady event once data is received, I add Date objects to each row. And the date object is displayed in the grid.

repro:

  1. open plunker link
  2. refresh preview

plunker example: https://plnkr.co/edit/q0tT2ER9G6B6OBkK?preview

import React, { useCallback, useMemo, useRef, useState } from 'react';
import { render } from 'react-dom';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const GridExample = () => {
  const containerStyle = useMemo(() => ({ width: '100%', height: '100%' }), []);

  const [rowData, setRowData] = useState();
  
  const [columnDefs, setColumnDefs] = useState([
    { field: 'country', maxWidth: 200 },
    { field: 'date', width: 500 },
  ]);

  const onGridReady = useCallback((params) => {
    fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
      .then((resp) => resp.json())
      .then((data) =>
        setRowData(data.map((oneRow) => ({ ...oneRow, date: new Date() })))
      );
  }, []);

  return (
    <div style={containerStyle}>
      <div style={containerStyle} className="ag-theme-alpine">
        <AgGridReact
          rowData={rowData}
          columnDefs={columnDefs}
          onGridReady={onGridReady}
        ></AgGridReact>
      </div>
    </div>
  );
};

Mara Tata San0
Related