Data-driven-ui NPM

data-driven-ui

Auto created by metadata Lists and Forms

User capabilities

Filtering, Ordering, Paging with saving it in url
Show/hide filter
Autofilter by cell value (Click with alt, for dateperiod left/right alt)

Developer capabilities

Data source types
- odata
- local storage (js array)
- graphql in plans
Default UI realization in MaterialUI with many components
You can do full custom UI realization or only add new types of field
All configuration in json by data (style, value) etc, for example: style: (meta, item, rowIdx, columnIdx) => {return item.ShipCountry === 'USA' ? {backgroundColor: 'green'} : undefined}

Simple example of list settings

this.meta = {
      columns: [
        { name: "OrderID", orderable: true },
        { name: "CustomerID" },
        { name: "OrderDate", type: "date" },
        { name: "RequiredDate", type: "date" },
        { name: "ShippedDate", type: "date" },
        { name: "ShipCountry" }
      ],
      key: "OrderID",
      orderable: true,
      filters: [
        { name: "ShipCountry", type: "text" },
        { name: "OrderDate", type: "dateperiod" }
      ],
      paging: {},
      selectable: { type: "row&checkbox", isMulti: true },
      parsHolder: {
        type: "addressBar",
        prefix: "",
        history: this.props.history
      },
      dataSource: { type: "odata", shortPath: `Orders`, selectAll: true }
    };