+ scroll width resize on grid

src/App.js

@@ -107,6 +107,7 @@ const Row = ({top, selected, children}) => {
 }
 
 const Cell = ({children, options, record, field, selected, model, models={}, onClick, ...props}) => {
+    const columnWidths =  getColumnWidths(record.constructor.name, field.name)
         
     let Formatter = React.Fragment
     const type = (children && typeof children === 'object' && children.constructor) || model
@@ -128,7 +129,8 @@ const Cell = ({children, options, record, field, selected, model, models={}, onC
 
 
     return( 
-        <div className='Cell' onClick={onClick}>
+        <div className='Cell' onClick={onClick} 
+            style={{width: columnWidths[localStorage.url][record.constructor.name][field.name] + '%'}} >
             <Formatter record={record} options={options} model={model} models={models} {...props} field={field}>
                   {Formatter === React.Fragment ? (children && children.toString()) : children}
             </Formatter>
@@ -168,25 +170,36 @@ const searchQueryBuilder = (search, model) => {
     return {$or: model.fields.filter(field => field.type.kind == 'SCALAR').map(field => ({[field.name]: queryRegexp}))}
 }
 
-const GridHeaderItem = ({field, sort:[sort], model, ...props}) => 
-<div className="GridHeaderItem" 
-    onWheel={e => {
-        //const columnWidths = JSON.parse(localStorage.columWidths || '{}')
-        //if (!columnWidths[localStorage.url]) columnWidths[localStorage.url] = {}
-        //if (!columnWidths[localStorage.url][model.name]) columnWidths[localStorage.url][model.name] = {}
-        //columnWidths[localStorage.url][model.name][field.name]
-    }} 
-    {...props}>
-    {field.name in sort && sort[field.name] === -1 && '^ '}
-    {field.name}
-    {field.name in sort && sort[field.name] === 1 && ' v'}
-</div>
+const getColumnWidths = (mn, fn) => {  
+    const columnWidths = JSON.parse(localStorage.columnWidths || '{}')
+    if (!columnWidths[localStorage.url]) columnWidths[localStorage.url] = {}
+    if (!columnWidths[localStorage.url][mn]) columnWidths[localStorage.url][mn] = {}
+    if (!columnWidths[localStorage.url][mn][fn]) columnWidths[localStorage.url][mn][fn] = 100
+    return columnWidths;
+}
+
+const GridHeaderItem = ({field, sort:[sort], model, onWheel, ...props}) =>  {
+    const columnWidths =  getColumnWidths(model.name, field.name)
+    return (
+        <div className="GridHeaderItem" 
+        onWheel={e => {
+            const columnWidths =  getColumnWidths(model.name, field.name)
+            columnWidths[localStorage.url][model.name][field.name] += e.deltaY > 0 ? 5 : -5
+            localStorage.columnWidths = JSON.stringify(columnWidths)
+            onWheel()
+        }} 
+        {...props} style={{width: columnWidths[localStorage.url][model.name][field.name] + '%'}}> 
+        {field.name in sort && sort[field.name] === -1 && '^ '}
+        {field.name}
+        {field.name in sort && sort[field.name] === 1 && ' v'}
+        </div>)
+}
 
 
 
-const GridHeader = ({fields, sort, onSort, model}) => 
+const GridHeader = ({fields, sort, onSort, onWheel, model}) => 
 <div className="GridHeader">
-    {fields.map(field => <GridHeaderItem model={model} key={field.name} field={field} sort={sort} onClick={() => onSort(field.name)}/>)}
+    {fields.map(field => <GridHeaderItem model={model} key={field.name} field={field} sort={sort} onClick={() => onSort(field.name)} onWheel={onWheel}/>)}
 </div>
 
 const getModelByField = (field, models={}) => {
@@ -240,6 +253,7 @@ const ModelView = ({model, models={}, options, components:Components={Search, Co
 
 
     const [records, setRecords] = useState([])
+    const [wheel, setWheel] = useState([])
 
 
     const [search, setSearch] = useState("")
@@ -281,6 +295,7 @@ const ModelView = ({model, models={}, options, components:Components={Search, Co
                 </Components.Count> 
                 <Components.GridHeader fields={model.fields} 
                             sort={cursorCalls.sort} 
+                            onWheel={() => setWheel(Math.random())}
                             onSort={sort => setCursorCalls({...cursorCalls,
                                 sort: [{[sort]: cursorCalls.sort[0][sort] === 1 ? -1 : 1}]
                             })}