Docz: How to generate a Props like table without a component?

[allimuu]

How to generate a Props like table without a component?

We have components that can be passed either components or an array of objects for definitions (i.e. Column definitions for a table).

Since we don't use the component based approach of the API (this is for merging with a third party API), to document our custom column definition API would it be possible to show a table like the one Props component generates but without a component?

Is there some Markdown that can be used to get it to look similar?

This is honestly a one off in the docs and the Props works great for everything else :)

Edit: Forgot to mention this is with v2 (docz@next)

Thanks

[rakannimer]

Hey @allimuu,

If I understood correctly you want to render a table that looks like the one generated by the Props component but you want to pass in the fields yourself instead of having it be generated from a components' props.

You should be able to do that by using the Props component from gatsby-theme-docz (not docz).

Here's a small example :

// MyComponentPropsDocs.js

import React from "react";
import { Props } from "gatsby-theme-docz/src/components/Props/";

export default () => (
  <Props
    props={{
      testProp: {
        defaultValue: {
          value: "'info'",
          computed: false
        },
        description: "A test prop",
        required: true,
        type: {
          name: "string"
        }
      }
    }}
    getPropType={prop => prop.type.name}
  />
);

And then in your mdx :

// MyComponent.mdx
import MyComponentPropsDocs from "./MyComponentPropsDocs"

<MyComponentPropsDocs />

Make sure to read the source code if you want to do more complex things : https://github.com/doczjs/docz/blob/307485ec8418240ccf57785f428da90fc1c9b7b5/core/gatsby-theme-docz/src/components/Props/index.js

Does that answer your question ?

[allimuu]

Thank you! That does answer my question and exactly what I was looking for :)

[rakannimer]

Awesome ! Happy to hear that 👍

Going to close this issue, please feel free to re-open if you run into any problem !