Table Editor : How to prevent certain column display when ed

Topic: Table Editor : How to prevent certain column display when editing?

linglecai free asked 2 years ago

Expected behavior

I want to remove display some column when editing rows because it has some customAction and includes html tags , it showed wrongly.

Actual behavior

cannot find a solution

Resources (screenshots, code snippets etc.)

const myProductsDatatableColumns = [
    ...
    {
        label: '',
        field: 'customAction',
        editable: false,
        sort: false,
    },
    ...
]

..Instance.update(
                {
                    columns: myProductsDatatableColumns,
                    rows: rowsData.map((row) => {
                        return {
                            ...row,
                            customAction: `<a role="button" class="check_selection" id="${row.code}"Details</a>`,
                        };
                    }),
                },
                myProductsDatatableOptions
            );

How can I prevent the column with customAction to display when I click the 'edit' icon that Table Editor generate automatcally?

Add comment

Grzegorz Bujański staff answered 2 years ago

0 0 Best answer

Please insert min. 20 characters.

At the moment, there is no such option. But you can do it yourself in a simple way:

tableEditor.addEventListener('edit.mdb.tableEditor', (e) => {
  setTimeout(() => {
    const disabledEl = tableEditor.querySelectorAll('input');
      disabledEl.forEach((el) => {
        if (el.disabled) {
          el.parentElement.style.display = 'none'
        }
      })
  })
})

I prepared a snippet in which you can test it: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/3590016#js-tab-view

linglecai free commented 2 years ago

thanks very very much! I'll try to use in my project, and give u a feed back later.

linglecai free commented 2 years ago

it worked as expected, many thanks! by the way, i do have an advice on our website code example, that please consider to not use anonymous function or handler in offcial docs. Because that could trouble many starters(like me before) , it can easily cause reading obstacle and also behave wrongly for example : add multiple eventlistner.

thanks very much ,your answer works like a charm!

Grzegorz Bujański staff commented 2 years ago

Thank you for your feedback! We will consider it.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB Standard
MDB Version: MDB5 3.10.1
Device: PC
Browser: Chrome
OS: Windows 10
Provided sample code: No
Provided link: No

linglecai

15Support score
3Questions 0Answers 0Snippets