1"use strict";(self.webpackChunkgridjs_website=self.webpackChunkgridjs_website||[]).push([[6965],{35395:function(e,n,t){t.d(n,{$:function(){return d}});var r=t(94578),a=t(85587),o=t(12807),i=t(74915),s=t(67294),m=t(85384),d=function(e){function n(){return e.apply(this,arguments)||this}return(0,r.Z)(n,e),n.prototype.render=function(){return s.createElement(i.Z,{children:this.props.children,transformCode:function(e){return"\nfunction () {\n "+e+"\n \n const wrapperRef = useRef(null);\n \n reactUseEffect(() => {\n if (typeof (grid) == 'object' && wrapperRef && wrapperRef.current && wrapperRef.current.childNodes.length === 0) {\n grid.render(wrapperRef.current);\n }\n });\n \n return (\n <div ref={wrapperRef} />\n );\n}\n"},live:!0,scope:Object.assign({Grid:a.rj,html:a.dy,h:a.h,reactUseEffect:s.useEffect,gCreateRef:a.Vf,gComponent:a.wA,PluginPosition:a.t8,BaseComponent:a.BaseComponent,CodeBlock:i.Z,useEffect:a.d4,useRef:s.useRef,faker:m,esES:o._Y,frFR:o.gQ,useState:a.eJ,useConfig:a.ZR,useSelector:a.v9,useTranslator:a.I4},this.props.scope)})},n}(s.Component)},45637:function(e,n,t){t.r(n),t.d(n,{assets:function(){return p},contentTitle:function(){return d},default:function(){return f},frontMatter:function(){return m},metadata:function(){return l},toc:function(){return u}});var r=t(87462),a=t(63366),o=(t(67294),t(3905)),i=t(35395),s=["components"],m={id:"import-json",title:"JSON",keywords:["javascript","table","javascript table","gridjs","grid js","import json"]},d=void 0,l={unversionedId:"examples/import-json",id:"examples/import-json",title:"JSON",description:"In order to import JSON (or an array of objects), simply change the data input to [{ key: value }, ... ].",source:"@site/docs/examples/import-json.md",sourceDirName:"examples",slug:"/examples/import-json",permalink:"/docs/examples/import-json",draft:!1,editUrl:"https://github.com/grid-js/website/edit/master/docs/examples/import-json.md",tags:[],version:"current",lastUpdatedBy:"Afshin Mehrabani",lastUpdatedAt:1673879113,formattedLastUpdatedAt:"Jan 16, 2023",frontMatter:{id:"import-json",title:"JSON",keywords:["javascript","table","javascript table","gridjs","grid js","import json"]},sidebar:"sidebar",previous:{title:"Hidden Columns",permalink:"/docs/examples/hidden-columns"},next:{title:"XML",permalink:"/docs/examples/import-xml"}},p={},u=[],c={toc:u};function f(e){var n=e.components,t=(0,a.Z)(e,s);return(0,o.kt)("wrapper",(0,r.Z)({},c,t,{components:n,mdxType:"MDXLayout"}),(0,o.kt)("p",null,"In order to import JSON (or an array of objects), simply change the data input to ",(0,o.kt)("inlineCode",{parentName:"p"},"[{ key: value }, ... ]"),".\nGrid.js expects each column to have a unique ",(0,o.kt)("inlineCode",{parentName:"p"},"id")," field which matches the keys in the ",(0,o.kt)("inlineCode",{parentName:"p"},"data")," object:"),(0,o.kt)(i.$,{children:"\nconst grid = new Grid({\n columns: [{\n id: 'name',\n name: 'Name'\n }, {\n id: 'email',\n name: 'Email'\n }, {\n id: 'phoneNumber',\n name: 'Phone Number'\n }],\n data: [\n { name: 'John', email: '[email protected]', phoneNumber: '(353) 01 222 3333' },\n { name: 'Mark', email: '[email protected]', phoneNumber: '(01) 22 888 4444' },\n ]\n});\n",mdxType:"LiveExample"}),(0,o.kt)("br",null),(0,o.kt)("admonition",{type:"tip"},(0,o.kt)("p",{parentName:"admonition"},"Grid.js tries to guess the ",(0,o.kt)("inlineCode",{parentName:"p"},"id")," of columns by camelCasing them if column ID is not defined."),(0,o.kt)("p",{parentName:"admonition"},"E.g. ",(0,o.kt)("inlineCode",{parentName:"p"},"Phone Number")," becomes ",(0,o.kt)("inlineCode",{parentName:"p"},"phoneNumber"))),(0,o.kt)(i.$,{children:"\nconst grid = new Grid({\n columns: ['Name', 'Email', 'Phone Number'],\n data: [\n { name: 'John', email: '[email protected]', phoneNumber: '(353) 01 222 3333' },\n { name: 'Mark', email: '[email protected]', phoneNumber: '(01) 22 888 4444' },\n ]\n});\n",mdxType:"LiveExample"}),(0,o.kt)("br",null),(0,o.kt)("p",null,"You can also leave the ",(0,o.kt)("inlineCode",{parentName:"p"},"columns")," config empty if you want Grid.js to set the column names automatically:"),(0,o.kt)(i.$,{children:"\nconst grid = new Grid({\n data: [\n { name: 'John', email: '[email protected]', phoneNumber: '(353) 01 222 3333' },\n { name: 'Mark', email: '[email protected]', phoneNumber: '(01) 22 888 4444' },\n ]\n});\n",mdxType:"LiveExample"}),(0,o.kt)("br",null),(0,o.kt)("p",null,(0,o.kt)("inlineCode",{parentName:"p"},"id")," field accepts a function as well. If you have a complex JSON object, pass a function to ",(0,o.kt)("inlineCode",{parentName:"p"},"id")," and try to refine and format your data:"),(0,o.kt)(i.$,{children:"\nconst grid = new Grid({\n columns: [{\n data: (row) => row.name.first,\n name: 'First Name'\n }, {\n data: (row) => row.name.last,\n name: 'Last Name'\n }, {\n id: 'email',\n name: 'Email'\n }, {\n id: 'phoneNumber',\n name: 'Phone Number'\n }
1],\n data: [{\n name: {\n first: 'John',\n last: 'Murphy'\n },\n email: '[email protected]',\n phoneNumber: '(353) 01 222 3333'\n },\n {\n name: {\n first: 'Mark',\n last: 'Wiens'\n },\n email: '[email protected]',\n phoneNumber: '(01) 22 888 4444'\n },\n ]\n});\n",mdxType:"LiveExample"}))}f.isMDXComponent=!0},12807:function(e,n,t){t.d(n,{_Y:function(){return r},gQ:function(){return a}});var r={search:{placeholder:"Buscar..."},sort:{sortAsc:"Ordenar la columna en orden ascendente",sortDesc:"Ordenar la columna en orden descendente"},pagination:{previous:"Anterior",next:"Siguiente",navigate:function(e,n){return"P\xe1gina "+e+" de "+n},page:function(e){return"P\xe1gina "+e},showing:"Mostrando registros del",of:"de un total de",to:"al",results:"registros"},loading:"Cargando...",noRecordsFound:"No se encontraron registros",error:"Se produjo un error al recuperar datos"},a={search:{placeholder:"\ud83d\udd0d Recherche..."},sort:{sortAsc:"Trier la colonne dans l'ordre croissant",sortDesc:"Trier la colonne dans l'ordre d\xe9croissant"},pagination:{previous:"Pr\xe9c\xe9dent",next:"Suivant",navigate:function(e,n){return"Page "+e+" de "+n},page:function(e){return"Page "+e},showing:"Affichage des r\xe9sultats",of:"sur",to:"\xe0",results:""},loading:"Chargement...",noRecordsFound:"Aucun r\xe9sultat trouv\xe9",error:"Une erreur est survenue lors de la r\xe9cup\xe9ration des donn\xe9es"}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.