PropsTable

Handy component to display props for a component.

Allows customization for different purposes:

- Header titles can be customised

- Items' property names can be customised

- Up to 3 columns can be skipped

Code to reproduce the example above:

1import { PropsTable } from '@hummingbot/hbui/components/table/PropsTable'
2
3<PropsTable
4  title='Standard Props Table Example'
5  items={[
6    {
7      propName: "title",
8      type: 'String',
9      default: '"Props"',
10      required: 'optional',
11      description: 'The title of the component, shown as a header.'
12    },
13    {
14      propName: 'description',
15      type: 'String',
16      default: "' '",
17      required: 'optional',
18      description: 'card description'
19    },
20    {
21      propName: 'children',
22      type: 'JSX',
23      default: 'null',
24      required: 'optional',
25      description: 'Custom JSX content'
26    },
27    {
28      propName: 'linkURL',
29      type: 'String',
30      default: "' '",
31      required: 'optional',
32      description: 'link destination URL'
33    },
34    {
35      propName: 'external',
36      type: 'Boolean',
37      default: 'false',
38      required: 'conditional',
39      description: 'when a link is external, pass {true}'
40    },
41    {
42      propName: 'linkClass',
43      type: 'Class',
44      default: 'null',
45      required: 'conditional',
46      description: 'if "linkUrl" is given and refers to an internal link, pass the "Link" class you are using, eg. imported from "react-router-dom" or "gatsby" or "next/link"'
47    }
48  ]}
49/>

Customization

The next example shows how to:

- Set custom header names

- Set custom property names of the given entries

- Skip one of the columns to have only 4 total

1import { PropsTable } from '@hummingbot/hbui/components/table/PropsTable'
2
3<PropsTable
4  title='Custom example'
5  skipColumn4
6  col1Name="Ingredient"
7  col2Name="Amount"
8  col3Name="Cook time"
9  col5Name="Notes"
10  param1Name="name"
11  param2Name="grams"
12  param3Name="minutes"
13  param5Name="notes"
14  items={[
15    {
16      name: "Chocolate",
17      grams: '100',
18      minutes: '20',
19      notes: 'Must be Swiss made.'
20    },
21    {
22      name: 'Egg',
23      grams: '20',
24      minutes: "15",
25      notes: 'Scrambled to perfection.'
26    },
27    {
28      name: 'Chantilly',
29      grams: '5',
30      minutes: '7',
31      notes: 'Add on top only at the end.'
32    },
33    {
34      name: 'Cherry',
35      grams: '3',
36      minutes: "Don't cook",
37      notes: 'Place on top of the chantilly to finalize.'
38    }
39  ]}
40/>