I've got data displayed using tabulator and I've added some buttons to customize the table such as highlighting, saving changes, adding rows etc... and i'm now trying to implement a locked/unlocked feature. It's exactly how it sounds, when the page is locked, you can't update the table with those buttons. When the page is unlocked, you can update the table with those buttons.
Right now, upon page load, i've got a locked icon svg that sits next to the buttons and you are restricted from making changes with the other buttons. however, the toggle function to get it to unlock those buttons isn't working. it's meant to switch to an unlocked icon svg and, of course, allow me to use all the buttons and edit the table. does anyone see where i'm going wrong in my code? all feedback is welcome and appreciated! thanks in advance.
document.addEventListener('DOMContentLoaded', function() {
let isLocked = true;
function toggleLock() {
const lockIcon = document.getElementById('lock-icon');
const unlockIcon = document.getElementById('unlock-icon');
if (isLocked) {
lockIcon.style.display = 'inline';
unlockIcon.style.display = 'none';
} else {
lockIcon.style.display = 'none';
unlockIcon.style.display = 'inline';
}
const buttons = [
document.getElementById('add-row'),
document.getElementById('del-row'),
document.getElementById('saveChanges'),
document.getElementById('highlightButton'),
document.getElementById('remove-highlight'),
document.getElementById('remove-font-style')
];
buttons.forEach(button => {
button.disabled = isLocked;
});
table.updateOptions({
editable: !isLocked,
selectable: !isLocked
});
document.body.style.cursor = isLocked ? 'not-allowed' : 'default';
}
toggleLock();
document.getElementById('lock-toggle').addEventListener('click', function() {
isLocked = !isLocked;
toggleLock();
});
});<div class="table-controls">
<button id="add-row">Add Row</button>
<button id="del-row">Delete Row</button>
<button id="saveChanges">Save Changes</button>
<button id="highlightButton">Highlight</button>
<button id="remove-highlight">Remove Highlight</button>
<button id="remove-font-style">Remove Text Color</button>
<button id="lock-toggle" style="cursor: pointer;">
<svg id="lock-icon" style="width: 24; height: 24;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M295.424 831.36512h450.56a20.48 20.48 0 0 0 20.48-20.48v-350.4128a20.48 20.48 0 0 0-20.48-20.48h-9.70752v-51.36384c-1.26976-117.248-97.95584-212.62336-215.552-212.62336-117.94432 0-214.6304 95.66208-215.57248 213.4016v50.5856h-9.70752a20.48 20.48 0 0 0-20.48 20.48v350.4128a20.43904 20.43904 0 0 0 20.45952 20.48z m430.08-40.96h-409.6v-309.4528h409.6v309.4528zM346.09152 389.57056c0.75776-95.17056 79.07328-172.60544 174.61248-172.60544 95.25248 0 173.58848 77.2096 174.592 172.01152v51.01568H346.07104l0.02048-50.42176z" fill="#004F6E" />
<path d="M476.01664 721.69472a20.48 20.48 0 0 0 20.48 20.48h48.37376a20.48 20.48 0 0 0 20.48-20.48v-66.17088a70.73792 70.73792 0 0 0 26.64448-55.1936 71.33184 71.33184 0 0 0-142.62272 0c0 21.62688 9.95328 41.82016 26.64448 55.1936v66.17088z m44.68736-151.552a30.3104 30.3104 0 0 1 30.35136 30.208c0 10.87488-6.10304 20.97152-15.95392 26.3168a20.48 20.48 0 0 0-10.69056 17.98144v56.56576h-7.41376v-56.56576c0-7.49568-4.096-14.41792-10.69056-17.98144a30.1056 30.1056 0 0 1-15.95392-26.3168 30.28992 30.28992 0 0 1 30.35136-30.208z" fill="#004F6E" />
</svg>
<svg id="unlock-icon" fill="#004F6E" height="24" width="24" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier"> <g> <g> <path d="M409.6,204.8h-256V128c0-56.559,45.841-102.4,102.4-102.4S358.4,71.441,358.4,128H384C384,57.421,326.579,0,256,0 S128,57.421,128,128v76.8h-25.6c-14.14,0-25.6,11.46-25.6,25.6v256c0,14.14,11.46,25.6,25.6,25.6h307.2 c14.14,0,25.6-11.46,25.6-25.6v-256C435.2,216.26,423.74,204.8,409.6,204.8z M409.6,486.4H102.4v-256h307.2V486.4z"></path> </g> </g>
<g> <g> <path d="M256,307.2c-21.171,0-38.4,17.229-38.4,38.4c0,16.666,10.735,30.737,25.6,36.045V422.4h25.6v-40.755 c14.865-5.299,25.6-19.379,25.6-36.045C294.4,324.429,277.171,307.2,256,307.2z M256,358.4c-7.066,0-12.8-5.734-12.8-12.8 c0-7.066,5.734-12.8,12.8-12.8c7.066,0,12.8,5.734,12.8,12.8C268.8,352.666,263.066,358.4,256,358.4z"></path> </g> </g> </g>
</svg>
</button>
</div>I can't find table variable in your code. Is it global variable?
After removing the code, I was able to run your code successfully and toggling works as well.
table.updateOptions({
editable: !isLocked,
selectable: !isLocked
});
Please take care of this.