react-graph-grid 0.0.2 → 0.0.5

package/README.md

@@ -1,3 +1,135 @@
 # react-graph-grid
 
-A React package containing a grid that can communicate with other grids through a connection graph
+A React package containing a grid that can communicate with other grids through a connection graph
+
+For all questions, please contact rmb@mail.ru
+
+Installation
+
+	npm install react-grpah-grid
+
+
+Example
+
+	import { GridFE } from '../../node_modules/react-graph-grid/src/GridFE';
+	import TestData from '../../node_modules/react-graph-grid/src/Tests/TestData';
+
+	...
+
+	/*
+	* assuming the API returns something like this:
+	*   const rows = [
+	*       {
+	*         Id: 1,
+	*         Name: 'Mikle',
+	*		  SecondName: 'Razumtsev',
+	*		  Date: '26/01/1979'
+	*		  Comment: 'Me',
+	*		  Hometown: 'Voronezh',
+	*		  HometownId: 1,
+	*       },
+	*       {
+	*         Id: 2,
+	*         Name: 'Boris',
+	*		  SecondName: 'Razumtsev',
+	*		  Date: '14/06/1953'
+	*		  Comment: 'Father',
+	*		  Hometown: 'Grafskaya',
+	*		  HometownId: 2,
+	*       },
+	*       {
+	*         Id: 3,
+	*         Name: 'Ilia',
+	*		  SecondName: 'Razumtsev',
+	*		  Date: '16/09/1980'
+	*		  Comment: 'Brother',
+	*		  Hometown: 'Pskov',
+	*		  HometownId: 4,
+	*       },
+	*     ]
+	*
+	*
+	*	e.params = [
+	*		{ key: 'pageSize', value: 10 },
+	*		{ key: 'pageNumber', value: 1 }
+	*   ]
+	*
+	*/
+
+	    function loadRows(e) {
+			return new Promise(function (resolve, reject) {
+                const fetchParams = {
+                    mode: 'cors',
+                    method: 'post',
+                    headers: {
+						'Content-Type': 'application/json'
+					},
+					body: JSON.stringify(e.params)
+                };
+
+				fetch(`/awesome-api-url/`, fetchParams).then(
+					(response) => {
+						resolve(response.json());
+					}
+				)
+				.catch(error => {
+					reject(error);
+				});
+		    });
+		};
+
+		function loadColumns() {
+			return [
+				{ name: 'Id', sortable: true, filtrable: true },
+				{ name: 'Name', sortable: true, filtrable: true },
+				{ name: 'SecondName', sortable: true, filtrable: true },
+				{ name: 'Date', sortable: true },
+				{ name: 'Comment', sortable: true, filtrable: true },
+				{ name: 'HometownId', visible: false },
+				{
+					name: 'Hometown', 
+					sortable: true, 
+					filtrable: true, 
+					type: 'lookup', 
+					keyField: 'HometownId', 
+					refKeyField: 'Id', 
+					refNameField: 'City', 
+					getRows: (e) => {
+						return new Promise(function (resolve, reject) {
+
+							const rows = new TestData().getCity(e);
+
+							if (rows != null) {
+								resolve(rows);
+							} else {
+								reject(Error("Error getting rows"));
+							}
+						});
+					}
+				},
+			]
+		};
+
+
+		<GridFE 
+			getRows={loadRows} 
+			getColumns={loadColumns} 
+			allowEditGrid={true}
+		/>
+
+Some grid properties
+
+			uid - grid uid
+			parentGrids - parent grids uids
+			buttons - buttons array [{ id: 1, name: 'commit', title: 'Commit changes', label: 'Commit', img: Images.commit, click: (e) => grid.commitChanges(e), getDisabled: (e) => grid.commitChangesDisabled(e) }, ... ]
+			multi - rows multiselect through a pocket
+			renderCell - custom render grid cell
+			getDefaultLinkContent - returns an object containing a data using when child grid responds to the parent grid active record
+			pageSize - grid page size
+
+
+For more examples see DebugApp.jsx
+
+0.0.5 version
+
+		"Adjust column visibility" option added to GridFE.jsx module

package/package.json

@@ -3,7 +3,7 @@
   "author": "Mikhail Razumtsev",
   "description": "A React package containing a grid that can communicate with other grids through a connection graph",
   "private": false,
-  "version": "0.0.2",
+  "version": "0.0.5",
   "type": "module",
   "scripts": {
     "dev": "vite --port 4000",

package/src/Grid.jsx

@@ -90,7 +90,7 @@ export class GridClass extends BaseComponent {
             grid.renderCell = props.renderCell;
         }
 
-        grid.dateFormat = props.dateFormat || 'dd.MM.yyyy';//'DD.MM.YYYY';
+        grid.dateFormat = props.dateFormat || 'dd.MM.yyyy';
         grid.dateTimeFormat = props.dateTimeFormat || 'dd.MM.yyyy HH:mm:ss';
 
         grid.rows = [];
@@ -289,6 +289,7 @@ export class GridClass extends BaseComponent {
                                                 gridTemplateRows: '1.5em auto',
                                                 gridAutoFlow: 'row',
                                                 width: 'calc(100% + 8px)',
+                                                justifyContent: 'space-between',
                                             }}
                                         >
                                             {grid.renderHeaderCell(col, context)}
@@ -498,7 +499,8 @@ export class GridClass extends BaseComponent {
         for (let col of grid.columns) {
             col.id = id++;
             col.title = col.title || col.name;
-            col.w = col.initW = col.w || 100;
+            col.w = col.w || 100;
+            col.initW = col.initW || 100;
             col.minW = col.minW || 50;
             col.grid = grid;
             grid.colDict[col.id] = grid.colDict[col.name] = grid.colDict[col.name.toLowerCase()] = col;

package/src/GridDB.jsx

@@ -151,7 +151,12 @@ export class GridDBClass extends GridPKClass {
                 {grid.renderPager()}
                 {super.render()}
                 {grid.renderPager(true)}
-                <Dropdown init={(dd) => { grid.menuDropdown = dd; }} getItems={(e) => { return grid.getGridSettings(e); }} onItemClick={(e) => { grid.onSettingsItemClick(e.itemId); }}></Dropdown>
+                <Dropdown
+                    init={(dd) => { grid.menuDropdown = dd; }}
+                    closeWhenMiss={true}
+                    getItems={(e) => { return grid.getGridSettings(e); }}
+                    onItemClick={(e) => { grid.onSettingsItemClick(e.itemId); }}>
+                </Dropdown>
             </>
         )
     }
@@ -607,7 +612,7 @@ export class GridDBClass extends GridPKClass {
     }
     // -------------------------------------------------------------------------------------------------------------------------------------------------------------
     getHeaderGridTemplateColumns(col) {
-        return col.sortInd == null ? 'auto 8px' : 'auto 22px';
+        return col.sortInd == null ? 'auto 12px' : 'auto 22px';
     }
     // -------------------------------------------------------------------------------------------------------------------------------------------------------------
     renderHeaderCell(col, context) {
@@ -774,12 +779,20 @@ export class GridDBClass extends GridPKClass {
     resetColumnsSort() {
         const grid = this;
         grid._sortString = '';
+        let needRefresh = false;
         for (let col of grid.columns) {
+            needRefresh = needRefresh || col.asc != false || col.desc != false;
+
             delete col.asc;
             delete col.desc;
             delete col.sortInd;
         }
-        grid.refresh();
+        if (needRefresh) {
+            grid.refresh();
+        }
+        else {
+            grid.refreshState();
+        }
     }
     // -------------------------------------------------------------------------------------------------------------------------------------------------------------
     changeColumnSortOrder(column, e) {

package/src/GridFE.jsx

@@ -111,6 +111,7 @@ export class GridFEClass extends GridFLClass {
                         grid.onClosePopup(e);
                         grid.refreshState();
                     }}
+                    footerButtons={grid._popupButtons ? grid._popupButtons : null}
                 >
                 </Modal>
                 :
@@ -123,10 +124,12 @@ export class GridFEClass extends GridFLClass {
         grid.popupIsShowing = false;
         grid.popupCloseWhenEscape = false;
         grid.popupTitle = '';
+        delete grid._popupButtons;
     }
     // -------------------------------------------------------------------------------------------------------------------------------------------------------------
     renderPopupContent() {
-        return <></>;
+        const grid = this;
+        return grid.columnsSettingsIsShowing ? grid.renderColumnsSettings() : <></>;
     }
     // -------------------------------------------------------------------------------------------------------------------------------------------------------------
     renderCell(grid, col, row, selected) {
@@ -506,4 +509,212 @@ export class GridFEClass extends GridFLClass {
         });
     }
     // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    getGridSettingsList() {
+        const res = super.getGridSettingsList();
+
+        const grid = this;
+
+        res.push({ id: 4, text: grid.translate('Adjust column visibility', 'grid-menu') });
+
+        if (!grid.exportDisabled) {
+            res.push({ id: 5, text: grid.translate('Export to CSV', 'grid-menu') });
+        }
+
+        return res;
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    onSettingsItemClick(itemId) {
+        super.onSettingsItemClick(itemId);
+        const grid = this;
+
+        switch (String(itemId)) {
+            case '4':
+                grid.showColumnsSettings();
+                grid.refreshState();
+                break;
+            case '5':
+                grid.exportToCSV();
+                grid.refreshState();
+                break;
+            default:
+        }
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    showColumnsSettings() {
+        const grid = this;
+        grid.popupIsShowing = true;
+        grid.columnsSettingsIsShowing = true;
+        grid.popupTitle = grid.translate('Adjust column visibility');
+
+        grid._visibleColumnsCount = 0;
+        for (let col of grid.columns) {
+            col._newVisible = col.visible;
+            if (col._newVisible != false) grid._visibleColumnsCount++;
+        }
+
+        grid._popupButtons = [
+            {
+                title: grid.translate('OK'),
+                onClick: (e) => {
+                    for (let col of grid.columns) {
+                        col.visible = col._newVisible;
+                    }
+                    grid.columnsSettingsIsShowing = false;
+                    grid.onClosePopup();
+                    grid.refreshState();
+                }
+            },
+            {
+                title: grid.translate('Cancel'),
+                onClick: (e) => {
+                    grid.columnsSettingsIsShowing = false;
+                    grid.onClosePopup();
+                    grid.refreshState();
+                }
+            },
+        ];
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    hideAllColumns(preview) {
+        const grid = this;
+        let first = true;
+        for (let col of grid.columns) {
+            if (col._newVisible == false || !preview && col.visible == false) continue;
+
+            if (first) {
+                first = false;
+                continue;
+            }
+
+            if (preview) {
+                col._newVisible = false;
+                grid._visibleColumnsCount--;
+            }
+            else {
+                col.visible = false;
+            }
+        }
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    showAllColumns(preview) {
+        const grid = this;
+        for (let col of grid.columns) {
+            if (col._newVisible != false || !preview && col.visible != false) continue;
+
+            if (preview) {
+                col._newVisible = true;
+                grid._visibleColumnsCount++;
+            }
+            else {
+                col.visible = true;
+            }
+        }
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    renderColumnsSettings() {
+        const grid = this;
+        return (
+            <div className='grid-columns-settings-div'>
+                <div>
+                    <ul className='dropdown-ul grid-columns-settings-div-ul'>
+                        <li className="dropdown-item" onClick={(e) => { grid.hideAllColumns(true); grid.refreshState(); }}>
+                            <div className="dropdown-item-div">
+                                <span className='grid-columns-settings-label'>{grid.translate('Visible columns')}</span>
+                                {Images.images.last()}
+                            </div>
+                        </li>
+                        {
+                            grid.columns.map((column) => {
+                                if (column._newVisible == false) return <></>;
+
+                                return (
+                                    <li className="dropdown-item" onClick={(e) => { if (grid._visibleColumnsCount > 1) { column._newVisible = false; grid._visibleColumnsCount--; grid.refreshState(); } }}>
+                                        <div className="dropdown-item-div">
+                                            <span>{column.title}</span>
+                                            {Images.images.next()}
+                                        </div>
+                                    </li>
+                                );
+                            })
+                        }
+                    </ul>
+                </div>
+                <div></div>
+                <div>
+                    <ul className='dropdown-ul grid-columns-settings-div-ul'>
+                        <li className="dropdown-item" onClick={(e) => { grid.showAllColumns(true); grid.refreshState(); }}>
+                            <div className="dropdown-item-div">
+                                {Images.images.first()}
+                                <span className='grid-columns-settings-label'>{grid.translate('Invisible columns')}</span>
+                            </div>
+                        </li>
+                        {
+                            grid.columns.map((column) => {
+                                if (column._newVisible != false) return <></>;
+
+                                return (
+                                    <li className="dropdown-item" onClick={(e) => { column._newVisible = true; grid._visibleColumnsCount++; grid.refreshState(); }}>
+                                        <div className="dropdown-item-div">
+                                            {Images.images.prev()}
+                                            <span>{column.title}</span>
+                                        </div>
+                                    </li>
+                                );
+                            })
+                        }
+                    </ul>
+                </div>
+            </div>
+        );
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    exportToCSV(filename, delimeter) {
+        const grid = this;
+
+        if (filename == null || filename == '') {
+            const date = new Date();
+            filename = `exportCSV_${date.getDate()}_${date.getMonth()}_${date.getFullYear()}_${date.getTime()}_`;
+        };
+
+        delimeter = delimeter || ';';
+
+        let titles = [];
+        for (let col of grid.columns) {
+            if (col.visible == false) continue;
+            titles.push(col.title || col.name);
+        }
+
+        // 1. Преобразование данных в CSV строку
+        const csvContent = "\uFEFF" + // Добавляем BOM для корректного отображения кириллицы в Excel
+            [
+                titles.join(delimeter), // Заголовки
+                ...grid.rows.map(item => {
+
+                    let values = [];
+                    for (let col of grid.columns) {
+                        if (col.visible == false) continue;
+                        values.push(item[col.name]);
+                    }
+                    return values.join(delimeter);
+
+                    //return Object.values(item).join(delimeter);
+                }) // Строки данных
+            ].join("\n");
+
+        // 2. Создание Blob
+        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+
+        // 3. Создание ссылки и скачивание
+        const link = document.createElement("a");
+        if (link.download !== undefined) {
+            const url = URL.createObjectURL(blob);
+            link.setAttribute("href", url);
+            link.setAttribute("download", filename);
+            link.style.visibility = 'hidden';
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        }
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
 }

package/src/GridFL.jsx

@@ -79,6 +79,7 @@ export class GridFLClass extends GridDBClass {
                 <Dropdown
                     getItems={(e) => { return grid.getAutocomleteItems(e); }}
                     onItemClick={(e) => { grid.onAutocomleteItemClick(e); }}
+                    closeWhenMiss={true}
                     init={(dd) => {
                         if (grid._autocompleteDropdown) {
                             dd.visible = grid._autocompleteDropdown.visible;
@@ -411,7 +412,7 @@ export class GridFLClass extends GridDBClass {
     }
     // -------------------------------------------------------------------------------------------------------------------------------------------------------------
     getHeaderGridTemplateColumns(col) {
-        return col.sortInd == null /*&& (col.filter == null || col.filter === '')*/ ? 'auto 18px' : 'auto 22px';
+        return col.sortInd == null ? 'auto 12px' : 'auto 22px';
     }
     // -------------------------------------------------------------------------------------------------------------------------------------------------------------
     getGridSettingsList() {

package/src/Modal.jsx

@@ -54,7 +54,8 @@ export class ModalClass extends BaseComponent {
 
         wnd.opt.closeWhenClick = props.closeWhenClick;
         wnd.opt.closeWhenEscape = props.closeWhenEscape;
-        wnd.opt.closeWhenMiss = (props.closeWhenMiss || !props.closeWhenMouseLeave) && wnd.opt.isModal;
+        wnd.opt.closeWhenMiss = props.closeWhenMiss && wnd.opt.isModal;
+        //wnd.opt.closeWhenMiss = (props.closeWhenMiss || props.closeWhenMouseLeave == false) && wnd.opt.isModal;
         wnd.opt.closeWhenMouseLeave = props.closeWhenMouseLeave;
 
         wnd.opt.onMouseEnter = props.onMouseEnter;
@@ -235,7 +236,7 @@ export class ModalClass extends BaseComponent {
                             wnd-btn={`button_${wnd.id}_${btn._ind}_`}
                             className={wnd.opt.footerButtonClass}
                             title={btn.title}
-                            onClick={btn.onclick ? (e) => btn.onclick(e) : null}
+                            onClick={btn.onClick ? (e) => btn.onClick(e) : null}
                             disabled={btn.getDisabled ? btn.getDisabled() : false}
                         >
                             <i className={btn.imageClass}></i>
@@ -306,12 +307,14 @@ export class ModalClass extends BaseComponent {
     // -------------------------------------------------------------------------------------------------------------------------------------------------------------
     close() {
         const wnd = this;
-        wnd.visible = false;
 
         if (wnd.onClose) {
-            wnd.onClose();
+            const ev = {};
+            wnd.onClose(ev);
+            if (ev.cancel) return;
         }
 
+        wnd.visible = false;
         wnd.refreshState();
     }
     // -------------------------------------------------------------------------------------------------------------------------------------------------------------

package/src/Tests/TestData.jsx

@@ -10,7 +10,7 @@ export default class TestData {
 
         const family = [
             { Id: 1, ParentId: [3, 4], Name: 'Mikle', SecondName: 'Razumtsev', Date: '26/01/1979', Comment: 'Good boy', Hometown: 'Voronezh', HometownId: 1 },
-            { Id: 2, ParentId: [0], Name: 'Nataly', SecondName: 'Sche..', Date: '15/01/1999', Comment: 'Good girl', Hometown: 'Hanty-Mansiysk', HometownId: 12 },
+            { Id: 2, ParentId: [0], Name: 'Nataly', SecondName: 'Sche..', Date: '14/01/1999', Comment: 'Good girl', Hometown: 'Hanty-Mansiysk', HometownId: 12 },
             { Id: 3, ParentId: [11, 23], Name: 'Lyuda', SecondName: 'Razumtseva', Date: '03/07/1953', Comment: 'Mommy', Hometown: 'Novosibirsk', HometownId: 8 }, 
             { Id: 4, ParentId: [5, 22], Name: 'Borya', SecondName: 'Razumtsev', Date: '14/06/1953', Comment: 'Papa', Hometown: 'Grafskaya', HometownId: 2 }, 
             { Id: 5, ParentId: [0], Name: 'Nina', SecondName: 'Razumtseva', Date: '17/06/1917', Comment: 'Babushka', Hometown: 'Ustyuzhna', HometownId: 9 },
@@ -25,22 +25,22 @@ export default class TestData {
             { Id: 14, ParentId: [6, 31], Name: 'Tuyanka', SecondName: 'Batyreva', Date: '15/11/2010', Comment: 'Plemyannica 3', Hometown: 'Elista', HometownId: 5 },
             { Id: 15, ParentId: [0], Name: 'Shura', SecondName: 'Pelushskaya', Date: '22/04/1919', Comment: 'Dv. Babushka', Hometown: 'Ustyuzhna', HometownId: 9 },
             { Id: 16, ParentId: [15], Name: 'Ira', SecondName: 'Pelushskaya', Date: '11/06/1947', Comment: 'Dv. Tetya', Hometown: 'Pskov', HometownId: 4 },
-            { Id: 17, ParentId: [11, 23], Name: 'Sveta', SecondName: 'Dolginova', Date: '10/11/195?', Comment: 'Tetya', Hometown: 'Novosibirsk', HometownId: 8 },
-            { Id: 18, ParentId: [11, 23], Name: 'Rita', SecondName: 'Dolginova', Date: '23/10/195?', Comment: 'Tetya', Hometown: 'Novosibirsk', HometownId: 8 },
-            { Id: 19, ParentId: [11, 23], Name: 'Nadya', SecondName: 'Shaula', Date: '11/11/196?', Comment: 'Tetya', Hometown: 'Novosibirsk', HometownId: 8 },
-            { Id: 20, ParentId: [11, 23], Name: 'Vitia', SecondName: 'Dolginov', Date: '11/11/196?', Comment: 'Dadya', Hometown: 'Novosibirsk', HometownId: 8 },
+            { Id: 17, ParentId: [11, 23], Name: 'Sveta', SecondName: 'Dolginova', Date: '10/11/1954', Comment: 'Tetya', Hometown: 'Novosibirsk', HometownId: 8 },
+            { Id: 18, ParentId: [11, 23], Name: 'Rita', SecondName: 'Dolginova', Date: '23/10/1956', Comment: 'Tetya', Hometown: 'Novosibirsk', HometownId: 8 },
+            { Id: 19, ParentId: [11, 23], Name: 'Nadya', SecondName: 'Shaula', Date: '11/11/1958', Comment: 'Tetya', Hometown: 'Novosibirsk', HometownId: 8 },
+            { Id: 20, ParentId: [11, 23], Name: 'Vitia', SecondName: 'Dolginov', Date: '11/11/1958', Comment: 'Dadya', Hometown: 'Novosibirsk', HometownId: 8 },
             { Id: 21, ParentId: [11, 23], Name: 'Tanya', SecondName: 'Dolginova', Date: '07/01/1963', Comment: 'Tetya', Hometown: 'Elista', HometownId: 5 },
-            { Id: 22, ParentId: [0], Name: 'Misha', SecondName: 'Razumtsev', Date: '??/??/19??', Comment: 'Ded', Hometown: 'Grafskaya', HometownId: 2 },
-            { Id: 23, ParentId: [0], Name: 'Zambo', SecondName: 'Dolginov', Date: '??/??/19??', Comment: 'Ded 2', Hometown: 'Elista', HometownId: 5 },
+            { Id: 22, ParentId: [0], Name: 'Misha', SecondName: 'Razumtsev', Date: '05/11/1918', Comment: 'Ded', Hometown: 'Grafskaya', HometownId: 2 },
+            { Id: 23, ParentId: [0], Name: 'Zambo', SecondName: 'Dolginov', Date: '24/04/1926', Comment: 'Ded 2', Hometown: 'Elista', HometownId: 5 },
 
             { Id: 24, ParentId: [18, 34], Name: 'Alina', SecondName: 'Ushakova', Date: '??/??/????', Comment: 'Dv. Sister', Hometown: 'Elista', HometownId: 5 },
             { Id: 25, ParentId: [19, 33], Name: 'Igor', SecondName: 'Shaula', Date: '??/??/????', Comment: 'Dv. Brother', Hometown: 'Energodar', HometownId: 14 },
             { Id: 26, ParentId: [19, 33], Name: 'Dima', SecondName: 'Shaula', Date: '??/??/????', Comment: 'Dv. Brother', Hometown: 'Energodar', HometownId: 14 },
             { Id: 27, ParentId: [20, 35], Name: 'Olga', SecondName: 'Dolginova', Date: '??/??/????', Comment: 'Dv. Sister', Hometown: 'Elista', HometownId: 5 },
             { Id: 28, ParentId: [20, 35], Name: 'Venia', SecondName: 'Dolginov', Date: '??/??/????', Comment: 'Dv. Brother', Hometown: 'Elista', HometownId: 5 },
-            { Id: 29, ParentId: [20, 36], Name: 'Oleg', SecondName: 'Dolginov', Date: '??/??/????', Comment: 'Dv. Brother', Hometown: 'Elista', HometownId: 5 },
+            { Id: 29, ParentId: [20, 36], Name: 'Oleg', SecondName: 'Dolginov', Date: '10/11/????', Comment: 'Dv. Brother', Hometown: 'Elista', HometownId: 5 },
 
-            { Id: 30, ParentId: [0], Name: 'Yura', SecondName: 'Pelushskiy', Date: '??/??/????', Comment: 'Dv. Ded', Hometown: 'Ustyuzhna', HometownId: 9 },
+            { Id: 30, ParentId: [0], Name: 'Yura', SecondName: 'Pelushskiy', Date: '??/??/1921', Comment: 'Dv. Ded', Hometown: 'Ustyuzhna', HometownId: 9 },
             { Id: 31, ParentId: [0], Name: 'Sanal', SecondName: 'Batyrev', Date: '11/06/????', Comment: 'Muzh Sestry 3', Hometown: 'Elista', HometownId: 5 },
             { Id: 32, ParentId: [0], Name: 'Dima', SecondName: 'Markelov', Date: '??/??/????', Comment: 'Muzh Sestry 2', Hometown: 'Elista', HometownId: 5 },
             { Id: 33, ParentId: [0], Name: 'Slava', SecondName: 'Shaula', Date: '??/??/????', Comment: 'Muzh Teti', Hometown: 'Energodar', HometownId: 14 },

package/src/Themes/Translate.jsx

@@ -11,6 +11,7 @@
         const dict = {
             'ADD': 'Добавить',
             'ADD NEW RECORD': 'Добавить новую строку',
+            'ADJUST COLUMN VISIBILITY': 'Настроить видимость колонок',
             'BUTTONS SIZE': 'Размер кнопок',
             'CANCEL': 'Отмена',
             'COLLAPSE': 'Свернуть',
@@ -29,6 +30,7 @@
             'EXPAND': 'Развернуть',
             'EXIT': 'Выход',
             'FIRST': 'К началу',
+            'INVISIBLE COLUMNS': 'Невидимые колонки',
             'LARGE BUTTONS': 'Большие',
             'LAST': 'В конец',
             'LOAD MORE RECORDS': 'Загрузить еще строк',
@@ -62,6 +64,7 @@
             'VALUE': 'Значение',
             'VIEW': 'Просмотр',
             'VIEW RECORD': 'Карточка',
+            'VISIBLE COLUMNS': 'Видимые колонки',
             'USER': 'Пользователь',
         };
         return dict[text.toUpperCase()] || text;

package/src/css/default.css

@@ -423,6 +423,14 @@
             background-color: lightgray;
         }
 
+.dropdown-item-div {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: nowrap;
+    align-items: center;
+    width: 100%;
+}
+
 .grid-header-content-grid {
     display: grid;
     grid-template-columns: auto 16px;
@@ -496,6 +504,22 @@
         background-color: lightgray;
     }
 
+
+.grid-columns-settings-div {
+    display: grid;
+    grid-template-columns: calc(50% - 4px) 8px calc(50% - 4px);
+    margin: 10px;
+}
+
+.grid-columns-settings-div-ul {
+    margin: 5px;
+}
+
+.grid-columns-settings-label {
+    font-weight: 600;
+    /*margin: 5px;*/
+}
+
 .graph-tabcontrol-buttons {
     margin: 0 1em;
     display: flex