Mig-schema-table NPM

schema-table-component

This component will render fields dynamically based on openApi schema JSON. Styling can be done using Bootstrap 5 compatible classes

Install

npm install mig-schema-table

Usage

Schema Example:

const userSchema = {
  properties: {
    id: {
      type: "string",
      readOnly: true,
    },
    name: {
      type: "string",
      minLength: 3,
    },
    dob: {
      type: "string",
      format: "date",
    },
    address: {
      type: "string",
      maxLength: 250,
    },
  },
  required: ["name"],
};

import React from "react";
import { SchemaTable, IColumnConfig } from "mig-schema-table";
import "mig-schema-table/dist/index.css";
// Add this for default datepicker styling
import "react-datepicker/dist/react-datepicker.css";
// Optionally add bootstrap5 styles

const config: { [keyName: string]: IColumnConfig } = {
  id: {
    hidden: true,
  },
  dob: {
    title: "Date of Birth",
  },
};

const Table = () => {
  const [users, setUsers] = useState();

  return (
    <SchemaTableComponent
      data={users || []}
      schema={userSchema}
      width={window.innerWidth}
      height={window.innerHeight - 150}
      config={config}
    />
  );
};

Component Props

Prop	Type	Description
schema	`object`	schemaObject to be rendered as a set of fields(example openapi schema).
config	`object`	custom UI config {keyName: string: IColumnConfig;}.
data	`array`	data props will be rendered from api
onRowClick	`function`	it will be navigate to detail of row data
width	`number`	this props will be calculated width of table
height	`number`	this props will be calculated height of table
tableTitle	`string`	custom title for table your own
isSearchable	`boolean`	if this props is `true` then the search filed will shown
isSortable	`boolean`	if this props is `true` then the table to be able to shorting the data

Config

you can import the type of config from the IFieldConfig.

const config: { [keyName: string]: IColumnConfig } = {};

@types/file-saver @types/jest @types/react @types/react-datepicker @types/react-dom date-fns date-fns-tz exceljs file-saver lodash openapi3-ts react react-datepicker react-dom react-popper react-scripts react-window

@everything-registry/sub-chunk-2168

7 days ago

11 days ago

16 days ago

17 days ago

17 days ago

18 days ago

21 days ago

21 days ago

22 days ago

22 days ago

23 days ago

23 days ago

24 days ago

24 days ago

24 days ago

24 days ago

25 days ago

25 days ago

28 days ago

28 days ago

28 days ago

28 days ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

29 days ago

30 days ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

6 months ago

6 months ago

5 months ago

5 months ago

5 months ago

6 months ago

6 months ago

6 months ago

7 months ago

6 months ago

6 months ago

7 months ago

6 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago