Vue 2 / Nuxt 2 passing objects and hyphen/kebab case properties about active-table HOT 4 CLOSED

Please note that the properties used for the configuration of the example above adhere to active-table version that is earlier than 0.1.0 which may differ to the latest version of the component. Please check the documentation to make sure you are using the correct properties or directly refer to our examples.

from active-table.

Hey @galaxyblur! Thankyou so much for using ActiveTable!

Passing object/arrays into ActiveTable in Vue 2

To prevent the internal property processors in Vue2 from changing the values we can explicitly assert the data binding to be regarded as a property by adding the .prop modifier:

When data is set as follows:

data() {
    return {
      content: [
        ["Planet", "Diameter"],
        ["Earth", 12756],
      ]}},

You can pass it like this:

<active-table :content.prop="content"/>

Or you can alternatively pass data directly into the component as follows:

<active-table :content.prop="[['Planet', 'Diameter'],['Earth', 12756]]"/>

I have created a new Code Sandbox for this (link) and will be adding it to the Examples page shortly.

Hyphen/Kebab case

The above solution should automatically take care of this (for Vue2). So you can change :headerIconStyle.prop to :header-icon-style.prop and it should work.

For anyone using Vue3 - you need to add the .camel modifier to the property instead - so change :headerIconStyle to :header-icon-style.camel.

(If anyone has a hyphen/kebab case solution for the framework they are using - please add it as a comment to this thread)

As a fallback solution for every framework, if you cannot use camel case, you can always stringify your value and pass it to the component as an attribute and not a property, this will allow you to lower case all of the attribute name's letters:

Change headerStyles='{"default":{"backgroundColor":"#d6d6d630"}}' to headerstyles='{"default":{"backgroundColor":"#d6d6d630"}}'.

For reference attributes are similar to properties, but they are passed into the element using markup (html) (with no additional framework syntax) and always require the value to be in a string form. See this thread for more information.

Let me know if these work for you, thanks!

from active-table.

Just to note, ActiveTable is still in development and will have its official release later this month. I am very surprised + excited that people have found this component and are already using it! 🎉

I am currently working on a few open source projects and am planning to release them in a sequence (so I could then fully focus on maintaining them rather than developing something new), all of which should be completed this month (if it all goes to plan ofcourse).

There will be updates actively coming into this repo as I am polishing up the website, but the component library should be considered as fully usable.

Nevertheless, if you notice any issues, have suggestions for improvements or notice certain things in the API that don't make sense - please create issue tickets and I will certainly try to address them!

Thankyou once again @galaxyblur!

from active-table.

@OvidijusParsiunas thank you so much for the advice! Everything worked as you described. Here is my final code in case it helps anyone else understand. This is for displaying a simpler table with non-editable data.

      <active-table
        :content.prop="tableData"
        :is-cell-text-editable.prop="false"
        :is-header-text-editable.prop="false"
        :display-header-icons.prop="false"
        :display-add-new-row.prop="false"
        :display-add-new-column.prop="false"
        :display-index-column.prop="false"
        :striped-rows.prop="true"
        :column-dropdown.prop="tableColDropdown"
        :row-dropdown.prop="tableRowDropdown"
        :overflow.prop="{ maxWidth: '100%' }"
        :table-style.prop="{ width: '100%' }"
        :header-styles.prop="{ default: { 'white-space': 'nowrap', 'text-overflow': 'ellipsis', overflow: 'hidden' } }"
        :style="{ width: '100%' }"
      ></active-table>

// ...

      tableColDropdown: {
        isSortAvailable: true,
        isDeleteAvailable: false,
        isInsertLeftAvailable: false,
        isInsertRightAvailable: false,
        isMoveAvailable: false,
      },
      tableRowDropdown: {
        displaySettings: {
          isAvailable: false,
        },
      },

from active-table.