Controls - type array of objects displayed wrongly

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",
    },
  },
},

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

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

1. 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® Core™ 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

[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.

[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.