FormGrid

How to use

import { FormGrid } from '@ederzadravec@jade-ui'
...
<FormGrid config={[]} />

Props

config = [                        // Rows
    [                             // Columns
      {                           // Column
        schema: 'field1',         // name, id, key
        size: { md: 6 },          // responsible width (xs, sm , md, lg, xl),
        hide: () => {},           // return true to hide,
        type: TextInput,          // Component to render
        props: (schema) => ({})   // props of component
      }
    ]
  ]

Examples

<FormGrid
  config={[
    [
      {
        schema: 'field-1',
        size: { md: 12 },
        type: TextInput,
        props: () => ({
          label: 'Field 1',
        }),
      },
    ],
    [
      {
        schema: 'field-2',
        size: { md: 6 },
        type: TextInput,
        props: () => ({
          label: 'Field 2',
        }),
      },
      {
        schema: 'field-3',
        size: { md: 6 },
        type: TextInput,
        props: () => ({
          label: 'Field 3',
        }),
      },
    ],
    [
      {
        schema: 'field-4',
        size: { md: 4 },
        type: TextInput,
        props: () => ({
          label: 'Field 4',
        }),
      },
      {
        schema: 'field-5',
        size: { md: 4 },
        type: TextInput,
        props: () => ({
          label: 'Field 5',
        }),
      },
      {
        schema: 'field-6',
        size: { md: 4 },
        type: TextInput,
        props: () => ({
          label: 'Field 6',
        }),
      },
    ],
  ]}
/>

<FormGrid
  config={[
    [
      {
        schema: 'field-1',
        size: { md: 12 },
        type: TextInput,
        props: () => ({
          label: 'Field 1',
        }),
      },
    ],
    [
      {
        schema: 'field-2',
        size: { md: 6 },
        type: TextInput,
        props: () => ({
          label: 'Field 2',
        }),
      },
      {
        schema: 'field-3',
        size: { md: 6 },
        type: TextInput,
        props: () => ({
          label: 'Field 3',
        }),
      },
    ],
    [
      {
        schema: 'field-4',
        size: { md: 4 },
        type: TextInput,
        props: () => ({
          label: 'Field 4',
        }),
      },
      {
        schema: 'field-5',
        size: { md: 4 },
        type: TextInput,
        props: () => ({
          label: 'Field 5',
        }),
      },
      {
        schema: 'field-6',
        size: { md: 4 },
        type: TextInput,
        props: () => ({
          label: 'Field 6',
        }),
      },
    ],
  ]}
/>

FormGrid

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}How to use

Props

Examples

How to use