Update only Table columns (th) - Smart UI Components

Tagged: columns, i18n, label, languages, svelte, table, translate, update

This topic has 2 replies, 2 voices, and was last updated 3 years, 3 months ago by fimarapp.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Posts
January 12, 2021 at 12:28 pm #101315
fimarapp
Member
Happy new year, my best wishes and thanks for this awesome web component.
I’m using Smart.Table (web component) with Svelte. I have different languages and would like to know how to update just columns without affecting the rest.
In particularly, I want to translate columns label when the user switch language. Here is my code:
```
  import { _ } from 'svelte-i18n'
  import { onMount } from 'svelte'
  import 'smart-webcomponents/source/styles/smart.default.css'
  import 'smart-webcomponents/source/modules/smart.table.js'
  export let fields = []
  export let source = []
  onMount(() => {
    const columns = fields.map(field => {
      const f = field.split(':') // field = 'name: string'
      return {
        label: $_(f[0]), // translate
        dataField: f[0],
        dataType: f[1].trim()
      }
    })
    Smart('#table', class {
      get properties() {
        return {
          keyboardNavigation: true,
          filtering: true,
          sortMode: 'one',
          selection: true,
          paging: true,
          freezeHeader: true,
          virtualization: true,
          dataSource: new Smart.DataAdapter({
            dataSource: source, dataFields: fields }),
          columns
        }
      }
    })
  })
```
Right now I’m doing it when I render the component because I couldn’t find any function to update just column labels.
Any help will be really appreciated. Thank you so much in advance for your time and knowledge!
January 12, 2021 at 2:15 pm #101318

yavordashew
Member

Hi Johnny,
Happy New Year best wishes from Smart UI Team!
There is a way that you can access the column headers properties and change them according to your needs.
I have made a code snippet for you to showcase one way of doing this:
<script>
let clickHandler = function(){
const table = document.getElementById(‘table’)
table.columns = [
{ label: ‘ID your language’, dataField: ‘id’, dataType: ‘number’ },
{ label: ‘Name in Another Language’, dataField: ‘firstName’, dataType: ‘string’ },
{ label: ‘Last Name in Another Language’, dataField: ‘lastName’, dataType: ‘string’ },
{ label: ‘Product Name in Another Language’, dataField: ‘productName’, dataType: ‘string’ },
{ label: ‘Qunatity in Another Language’, dataField: ‘quantity’, dataType: ‘number’ }
]
console.log(‘Column Headers Changed’)
}
</script>
<body>
<smart-table id=”table”></smart-table>
<button onclick=”clickHandler()”>Click Me</button>
</body>
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

January 16, 2021 at 12:00 am #101328

fimarapp
Member

Thank you so much Yavor, it works like a charm with Svelte! One of the best web components collection out there!
I’m using: bind:this={table}
Best regards and enjoy the weekend !!
Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.