cómo personalizar menús y barras de herramientas en GridJs

sobre personalización de menús y botones de la barra de herramientas

no proporcionamos APIs útiles directamente. sin embargo, podemos escribir algunas funciones js basadas en la estructura DOM para lograrlo.

Personalizar barra de menús

por ejemplo: mantener solo el menú Archivo, asumiendo que el id del div de GridJs es “gridjs-divid”

   //get menubar parent dom
   const menubar=document.querySelector("#gridjs-divid > div > div:nth-child(1) > div > div.x-spreadsheet-banner-info-s > div.x-spreadsheet-toolbar.x-spreadsheet-menubar");
   var childs = menubar.childNodes;


   for (var i = childs.length - 1; i >= 0; i--)
   {  
     // keep File menu  only
     if(childs[i].childNodes[0].childNodes[0].textContent!=="File")
       {
         menubar.removeChild(childs[i]);
       }
   }

Después de llamar a esta función

Personalizar elementos en la barra de menús

por ejemplo: mantener solo la opción “Descargar como XLSX” en el menú Archivo, asumiendo que el id del div de GridJs es “gridjs-divid”

   //get menubar parent dom
   const menubar=document.querySelector("#gridjs-divid > div > div:nth-child(1) > div > div.x-spreadsheet-banner-info-s > div.x-spreadsheet-toolbar.x-spreadsheet-menubar");
   var childs = menubar.childNodes;

   // keep the first one ->File menu  only
   for (var i = childs.length - 1; i >= 0; i--)
   {  //find the File menu
     if(childs[i].childNodes[0].childNodes[0].textContent==="File")
       {
            var dropdownparent = childs[i].childNodes[0].childNodes[1];
            var menuitems = dropdownparent.childNodes;
            for (var ii = menuitems.length - 1; ii >=0; ii--)
            {   
	        //remove other menu item that is not "Download As XLSX"
                if (menuitems[ii].textContent !== 'Download As XLSX')
                {
                    dropdownparent.removeChild(menuitems[ii]);
                }
            }
       }
   }

Después de llamar a esta función

Personalizar elementos de la barra de herramientas

por ejemplo: mantener solo el botón de zoom, asumando que el id del div de GridJs es “gridjs-divid”

   //get toolbar parent dom
   const toolbar=document.querySelector("#gridjs-divid > div > div.x-spreadsheet-toolbar > div.x-spreadsheet-toolbar-btns");
   var childs = toolbar.childNodes;


   for (var i = childs.length - 1; i >= 0; i--)
   {  
     // keep File menu  only
     if(childs[i].getAttribute("data-tooltip")!=="Zoom")
       {
         toolbar.removeChild(childs[i]);
       }
   }

Después de llamar a esta función

Personalizar efecto hover en la barra de herramientas

abrir ventana de inspección del navegador, seleccionar el botón de la barra de herramientas,

entonces podemos encontrar la clave CSS relacionada para este botón: freeze

agregar la siguiente regla CSS:

.x-spreadsheet-toolbar .x-spreadsheet-toolbar-btn:hover .x-spreadsheet-icon-img.freeze,
.x-spreadsheet-toolbar .x-spreadsheet-toolbar-btn.active .x-spreadsheet-icon-img.freeze {
  background: rgba(4, 71, 33, 0.08);
  filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
}

el resultado será:

Personalizar elementos en la barra inferior

Resumen

La barra inferior contiene dos botones interactivos:

1. ‌Botón Agregar Hoja de Trabajo‌ (add clase) - Crea nuevas hojas de trabajo
2. ‌Botón Seleccionar Hoja de Trabajo‌ (ellipsis clase) - Gestiona la selección de hojas de trabajo

Acceso DOM

Puedes acceder a estos elementos usando:

// Add Worksheet Button
const addButton = document.querySelector('.x-spreadsheet-icon-img.add');

// Select Worksheet Button
const selectButton = document.querySelector('.x-spreadsheet-icon-img.ellipsis');

Ejemplos de Personalización

1. Ocultar botones Para remover un botón del DOM:

// Hide Add Worksheet Button
const addButton = document.querySelector('.x-spreadsheet-icon-img.add');
addButton.parentElement.removeChild(addButton);

// Hide Select Worksheet Button
const selectButton = document.querySelector('.x-spreadsheet-icon-img.ellipsis');
selectButton.parentElement.removeChild(selectButton);

2. Cambiar íconos Puedes reemplazar íconos usando archivos SVG externos o datos SVG en línea.

const addButton = document.querySelector('.x-spreadsheet-icon-img.add');
addButton.style.backgroundImage = "url('https://example.com/fish-icon.svg')";
// Adjust size and position
addButton.style.width = '18px';
addButton.style.height = '18px';
addButton.style.left = '0';
addButton.style.top = '0';

3. Cambiar comportamiento del botón Puedes modificar el evento de clic para personalizar la funcionalidad:

const addButton = document.querySelector('.x-spreadsheet-icon-img.add');
addButton.addEventListener('click', function() {
  // Custom action here
  console.log('Custom add worksheet action');
});