Table Editor - Initialize as editable?


Topic: Table Editor - Initialize as editable?

ArmariusSoftware pro asked 2 months ago

Hello,

I just purchased the table editor plugin and am following the example at https://mdbootstrap.com/plugins/jquery/table-editor/. In particular, I have interest in both the Bubble Editor + Content Editor.

I've been able to get the example code on the page functioning quickly and flawlessly - however, I don't want to utilize the 3 buttons at the top of each example... Instead, I'd like the user to just be able to click on cells and edit them from the get-go (without toggling the editable button = true)

I have been able to achieve this functionality just fine by simply hiding the buttons div entirely, and then on page load triggering a click on the edit button. To me this seems like a messy approach, and would love if there's a way to do away with these buttons entirely. Am I missing something simple or is this not possible?

Maybe something like adding an 'editable: true' option to the initialization:

$('#ManagedCustomersTable').mdbEditor({ contentEditor: true, editable: true });

Thanks!!!


ArmariusSoftware pro answered 2 months ago

I was indeed missing something simple...

It appears the edit button simply toggles a class ".disabled-table" to the table element, which sets "pointer-events: none;"

For anyone else that runs into this, simply add the CSS rule:

.disabled-table { pointer-events: auto; }


Krzysztof Wilk staff commented 2 months ago

I'm glad you found an answer :)

If you have more questions feel free to ask.

Best regards


Krzysztof Wilk staff answered 2 months ago

Hi!

I think you have to achieve it using JavaScript / jQuery. Maybe try to use solution from our MDB Table Editable example? You can find it here: https://mdbootstrap.com/docs/jquery/tables/editable/


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: jQuery
  • MDB Version: 4.19.1
  • Device: Windows
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes