Ag-grid에 숫자만 입력되게 하기 : agNumberColumnFilter

https://www.ag-grid.com/angular-data-grid/filter-number/

import React from 'react';
import "./App.css"
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

function App() {
  const columnDefs = [
    { headerName: 'ID', field: 'id', filter: 'agNumberColumnFilter' },
    { headerName: 'Value', field: 'value', filter: 'agNumberColumnFilter', editable: true },
  ];

  const rowData = [
    { id: 1, value: 100 },
    { id: 2, value: 200 },
    { id: 3, value: 300 },
  ];

  return (
    <div className="app-container">
      <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
        <AgGridReact
          columnDefs={columnDefs}
          rowData={rowData}
          domLayout='autoHeight'
        />
      </div>
    </div>

  );
}

export default App;

화질이 왜이러징,,

 

 

+

  const rowData = [
    { id: 1, value: 100 },
    { id: 2, value: 200 },
    { id: 3, value: 300 },
    { id: 4, value: "나는 한글" }
  ];