{"id":57,"date":"2023-07-19T15:42:29","date_gmt":"2023-07-19T06:42:29","guid":{"rendered":"http:\/\/www.viw.co.kr\/ep\/?p=57"},"modified":"2023-07-19T16:07:25","modified_gmt":"2023-07-19T07:07:25","slug":"react-ag-grid-%eb%9d%84%ec%9a%b0%ea%b8%b0","status":"publish","type":"post","link":"http:\/\/www.viw.co.kr\/ep\/react-ag-grid-%eb%9d%84%ec%9a%b0%ea%b8%b0\/","title":{"rendered":"React Ag-grid \ub744\uc6b0\uae30"},"content":{"rendered":"\n<pre id=\"code_1689748790410\" class=\"wp-block-code\"><code><br>npx create-react-app . --template typescript\n\nnpm install typescript @types\/node @types\/react @types\/react-dom @types\/jest\n\nyarn add typescript @types\/node @types\/react @types\/react-dom @types\/jest\n\nnpm start\n\n\n* Cannot find module 'react-dom\/client' or its corresponding type declarations.ts(2307)\n-- npm install --save @types\/react-dom\nnpm i @types\/react-router-dom\n\n\nnpm i react-redux\n\nnpm i @types\/react-router-dom\nnpm i react-router-dom\n\n\n\nModule not found: Error: Can't resolve 'ag-grid-community\/styles\/ag-grid.css\n\nnpm i @ag-grid-community\/react\n\nnpm i -s react-router-dom\n\nnpm install @ag-grid-community\/all-modules<\/code><\/pre>\n\n\n\n<pre id=\"code_1689748742734\" class=\"wp-block-code\"><code>import { useCallback, useMemo, useState } from \"react\";\nimport { AgGridReact } from \"ag-grid-react\";\n\nimport '@ag-grid-community\/core\/dist\/styles\/ag-grid.css'\nimport \"@ag-grid-community\/core\/dist\/styles\/ag-theme-alpine.css\";\n\nimport {\n  CheckboxSelectionCallbackParams,\n  ColDef,\n  ColGroupDef,\n  Grid,\n  GridOptions,\n  GridReadyEvent,\n  HeaderCheckboxSelectionCallbackParams,\n} from \"ag-grid-community\";\n\nexport interface IOlympicData {\n  athlete: string;\n  age: number;\n  country: string;\n  year: number;\n  date: string;\n  sport: string;\n  gold: number;\n  silver: number;\n  bronze: number;\n  total: number;\n}\n\nvar checkboxSelection = function (params: CheckboxSelectionCallbackParams) {\n  \/\/ we put checkbox on the name if we are not doing grouping\n  return params.columnApi.getRowGroupColumns().length === 0;\n};\n\nvar headerCheckboxSelection = function (\n  params: HeaderCheckboxSelectionCallbackParams\n) {\n  \/\/ we put checkbox on the name if we are not doing grouping\n  return params.columnApi.getRowGroupColumns().length === 0;\n};\n\ntype props = {\n  rowData: IOlympicData&#91;];\n  pagination: number;\n};\n\nexport const GridComponent = ({ rowData, pagination }: props) =&gt; {\n  const containerStyle = useMemo(\n    () =&gt; ({ width: \"100%\", height: \"600px\" }),\n    &#91;]\n  );\n  const gridStyle = useMemo(() =&gt; ({ height: \"100%\", width: \"100%\" }), &#91;]);\n\n  const &#91;columnDefs, setColumnDefs] = useState&lt;ColDef&#91;]&gt;(&#91;\n    {\n      field: \"athlete\",\n      minWidth: 170,\n      checkboxSelection: checkboxSelection,\n      headerCheckboxSelection: headerCheckboxSelection,\n    },\n    { field: \"age\" },\n    { field: \"country\" },\n    { field: \"year\" },\n    {\n      field: \"date\",\n      filter: \"agDateColumnFilter\",\n      filterParams: {\n        \/\/ provide comparator function\n        comparator: (filterLocalDateAtMidnight: any, cellValue: any) =&gt; {\n          const dateAsString = cellValue;\n\n          if (dateAsString == null) {\n            return 0;\n          }\n\n          \/\/ In the example application, dates are stored as dd\/mm\/yyyy\n          \/\/ We create a Date object for comparison against the filter date\n          const dateParts = dateAsString.split(\"\/\");\n          const year = Number(dateParts&#91;2]);\n          const month = Number(dateParts&#91;1]) - 1;\n          const day = Number(dateParts&#91;0]);\n          const cellDate = new Date(year, month, day);\n\n          \/\/ Now that both parameters are Date objects, we can compare\n          if (cellDate &lt; filterLocalDateAtMidnight) {\n            return -1;\n          } else if (cellDate &gt; filterLocalDateAtMidnight) {\n            return 1;\n          }\n          return 0;\n        },\n      },\n    },\n    { field: \"sport\" },\n    { field: \"gold\" },\n    { field: \"silver\" },\n    { field: \"bronze\" },\n    { field: \"total\" },\n  ]);\n\n  const defaultColDef = useMemo&lt;ColDef&gt;(() =&gt; {\n    return {\n      editable: true,\n      sortable: true,\n      resizable: true,\n      filter: true,\n      flex: 1,\n      minWidth: 100,\n    };\n  }, &#91;]);\n\n  const onGridReady = useCallback((params: GridReadyEvent) =&gt; {}, &#91;]);\n\n  return (\n    &lt;div style={containerStyle}&gt;\n      &lt;div style={gridStyle} className=\"ag-theme-alpine\"&gt;\n        &lt;AgGridReact\n          rowData={rowData}\n          columnDefs={columnDefs}\n          defaultColDef={defaultColDef}\n          suppressRowClickSelection={true}\n          groupSelectsChildren={true}\n          rowSelection={\"multiple\"}\n          rowGroupPanelShow={\"always\"}\n          pivotPanelShow={\"always\"}\n          enableRangeSelection={true}\n          pagination={true}\n          paginationPageSize={pagination}\n          onGridReady={onGridReady}\n        &gt;&lt;\/AgGridReact&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  );\n};<\/code><\/pre>\n\n\n\n<pre id=\"code_1689748765002\" class=\"wp-block-code\"><code>{\n  \"name\": \"ag-grid-poc\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"dependencies\": {\n    \"@ag-grid-community\/all-modules\": \"^27.3.0\",\n    \"@ag-grid-community\/react\": \"^30.0.5\",\n    \"@reduxjs\/toolkit\": \"^1.9.5\",\n    \"@types\/jest\": \"^27.5.2\",\n    \"@types\/node\": \"^17.0.45\",\n    \"@types\/react\": \"^17.0.62\",\n    \"@types\/react-dom\": \"^17.0.20\",\n    \"@types\/react-router-dom\": \"^5.3.3\",\n    \"ag-grid-community\": \"^26.2.1\",\n    \"ag-grid-react\": \"^26.2.0\",\n    \"bootstrap\": \"^5.2.0\",\n    \"react\": \"^17.0.2\",\n    \"react-dom\": \"^17.0.2\",\n    \"react-redux\": \"^8.1.1\",\n    \"react-router-dom\": \"^6.14.2\",\n    \"react-scripts\": \"5.0.0\",\n    \"typescript\": \"^4.9.5\"\n  },\n  \"scripts\": {\n    \"start\": \"react-scripts start\",\n    \"build\": \"react-scripts build\",\n    \"test\": \"react-scripts test\",\n    \"eject\": \"react-scripts eject\"\n  },\n  \"eslintConfig\": {\n    \"extends\": &#91;\n      \"react-app\",\n      \"react-app\/jest\"\n    ]\n  },\n  \"browserslist\": {\n    \"production\": &#91;\n      \"&gt;0.2%\",\n      \"not dead\",\n      \"not op_mini all\"\n    ],\n    \"development\": &#91;\n      \"last 1 chrome version\",\n      \"last 1 firefox version\",\n      \"last 1 safari version\"\n    ]\n  }\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-57","post","type-post","status-publish","format-standard","hentry","category-react","no-post-thumbnail"],"_links":{"self":[{"href":"http:\/\/www.viw.co.kr\/ep\/wp-json\/wp\/v2\/posts\/57","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.viw.co.kr\/ep\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.viw.co.kr\/ep\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.viw.co.kr\/ep\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.viw.co.kr\/ep\/wp-json\/wp\/v2\/comments?post=57"}],"version-history":[{"count":1,"href":"http:\/\/www.viw.co.kr\/ep\/wp-json\/wp\/v2\/posts\/57\/revisions"}],"predecessor-version":[{"id":58,"href":"http:\/\/www.viw.co.kr\/ep\/wp-json\/wp\/v2\/posts\/57\/revisions\/58"}],"wp:attachment":[{"href":"http:\/\/www.viw.co.kr\/ep\/wp-json\/wp\/v2\/media?parent=57"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.viw.co.kr\/ep\/wp-json\/wp\/v2\/categories?post=57"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.viw.co.kr\/ep\/wp-json\/wp\/v2\/tags?post=57"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}