Controls - type array of objects displayed wrongly

[mayashavin]

Describe the bug
If use argTypes control type array for array of object, in the UI it will display [object Object] instead of proper value, because it tries to "serialize array into a comma-separated string inside a textbox" .

To Reproduce
Steps to reproduce the behavior:

1. Set the argTypes of the component doc

argTypes: {
  breadcrumbs: {
    control: "array",
    table: {
      category: "Props",
    },
  },
},

2. Set the args of the specific story to array of object

Template.args = {
  breadcrumbs: [
    { text: "Home", link: "#" },
    { text: "Category", link: "#" },
    { text: "Pants", link: "#" },
  ],
};

3. Go to Storybook page of that component, it prints [object Object],[object Object],[object Object]

Expected behavior
It should display { text: "Home", link: "#" }, { text: "Category", link: "#" }, { text: "Pants", link: "#" }

Screenshots

System
Environment Info:

System:
OS: macOS 10.15.7
CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
Binaries:
Node: 14.13.0 - /usr/local/bin/node
Yarn: 1.22.5 - /usr/local/bin/yarn
npm: 6.14.8 - /usr/local/bin/npm
Browsers:
Chrome: 87.0.4280.88
Firefox: 76.0.1
Safari: 14.0

[shilman]

You'll want to use control: 'object' for anything other than scalar array values.

We'll be providing a better UI for object controls in 6.2, and hopefully can do something for arrays as a followup there: #12824

[mayashavin]

@shilman Thanks a lot for the clarification. I would suggest to make a note in the docs regarding this case until a new version is released :)

[hydrosquall]

If all the objects in the array have the same keys, it could make sense to have a "table" display type (like the chrome console.table instead of using a JSON tree. We could have the option of either trying to infer the keys by default using the first object in the array, or letting the user pass in an explicit list of properties to use in the table.

[ghengeveld]

I really like the console.table suggestion. Like Chrome, it should automatically infer the right columns (based on all the rows rather than the first, so partial objects just have empty cells). I've opened a feature request for that: #14266

As of Storybook 6.2, arrays are inferred to use the object control type, which renders the JSON editor, regardless of whether the values are primitive or not.

[ghengeveld]

Closing this because the original bug (displaying [object Object]) was resolved in Storybook 6.2.

[MarkiyanPyts]

For default value issue is still valid