HTML Elements Forums Charts & Data Viz Table Update only Table columns (th)

This topic contains 2 replies, has 2 voices, and was last updated by Avatar Johnny Johnny 6 days, 13 hours ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #101315
    Avatar
    Johnny Johnny
    Participant

    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!

    #101318
    Avatar
    Yavor Dashev
    Participant

    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/

    #101328
    Avatar
    Johnny Johnny
    Participant

    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 !!

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

You must be logged in to reply to this topic.