Extension of datatable

Webix JS
#1

Hello !

I would like to create extesion of datatable (probably using “protoUI”).
The only additional functionality I would like to have is adding additional data-attribute to each column

So right now webix, for columns, generates html like that:

<div class="webix_hcolumn" style="position:absolute; top:0px; left:40px;width:148px;overflow:hidden;"></div>

And I would like to have something like that:

<div data-column-name="xxx" class="webix_hcolumn" style="position:absolute; top:0px; left:40px;width:148px;overflow:hidden;"></div>

Is it possible using “protoUI” ?

#2

@michald1986
you can simply extend native datatable instead of creating own implementation.
check this
https://snippet.webix.com/2zy93c5v

#3

Thanks a lot !
That is absolutely great.

btw: I might also add another functionality to databale, which would be translalation of datatable headers, is this something you would also do as an extension instead of own implementation ?

#4

it depends on expected result

#5

Hmmm

Let’s say I have datatable columns deinfed like that:

const tableColumns = [
    {
       id:"firstName",
       header: ["First name, { content: "textFilter" }],
       translationKey:"first_name"
    },
    {
       id:"lastName",
       header: ["Last name, { content: "textFilter" }],
    },
]

Now, imagine I have array of translations saved to local storage, (let’s call it “translationsArr”)
I would like to simply replace Headers of First Name and Last Name to translation found by translationKey in “translationsArr”.
And of course still display original values if nothing was found.

I planned to implement that using webix.protoUI, but using extend instead sounds like better option…

#6

looks like you have columns config loaded dynamically.
in other case I would recommend to translate headers explicitly.

check this
https://snippet.webix.com/bw6ofih9
but you may have more than one line in header.
in this case you need to use key per header line and check for this key during iteration.

var colCfg = {
  id: "myCol",
  header: [
    {text:"First Line", translationKey:"first_line"},
    {text:"Second Line", translationKey:"second_line"},
    {content:"textFilter"}
  ]
}
#7

That is awesome.
Thanks again for the help

I hope that answering my posts here didn’t ruin your Saturday :slight_smile: