eria-data-tool v1.2.1

eria-data-tool

Makes it easy to create forms

Install

npm install --save eria-data-tool

Intro

This component aims to provide a ready-made structure to perform standard crud operations.The links of the crud operations to be made are given to this component and the saving, updating and deletion operations are performed. Built on rsuite as infrastructure.

Feature

• Create save form based on data properties

• Create update form based on data properties

• You can assign data types to fields in the form

• You can customize the fields in the table with the render function

Usage

You need to specify the row detail as follows

Define Row Properties

const row = [
  {
    key: 'id',
    label: 'Id',
    fixed: true,
    width: 70,
    id: true,
    type: 'text',
    render: (item) => {
      return <span>{item.id}</span>
    }
  },
  {
    key: 'firstName',
    label: 'Ad',
    flexGrow: 1,
    type: 'text'
  },
  {
    key: 'lastName',
    label: 'Soyad',
    type: 'text',
    flexGrow: 1
  },
  {
    key: 'city',
    label: 'Şehir',
    type: 'select',
    flexGrow: 1,
    options: [
      { value: '38', label: 'Kayseri' },
      { value: '06', label: 'Ankara' },
      { value: '34', label: 'İstanbul' },
      { value: '35', label: 'İzmir' },
      { value: '01', label: 'Adana' }
    ]
  },
  {
    key: 'companyName',
    label: 'Firma',
    type: 'select',
    remote:
      'https://raw.githubusercontent.com/rsuite/rsuite/main/docs/public/data/users-role.json',
    flexGrow: 1
  },
  {
    key: 'street',
    label: 'Cadde',
    flexGrow: 1,
    type: 'number'
  },
  {
    key: 'date',
    label: 'Tarih',
    flexGrow: 1,
    type: 'dateTime'
  }
]

Example

import { EriaTable } from 'eria-data-tool'

function Example() {
  return (
    <EriaTable
      data={data}
      row={row}
      update={true}
      save={true}
      remove={true}
      pagination={true}
      remotePagination={true}
      totalPageCountUrl='http://localhost/api/count.json'
      listItemUrl='http://localhost/api/row.json'
      saveItemUrl='https://localhost/save'
      updateItemUrl='https://localhost/update'
      removeItemUrl='https://localhost/delete'
      onRowClick={(item) => {
        console.log(item)
      }}
      beforeSave={(item) => {
        return item
      }}
      afterSave={(item) => {
        console.log(item)
      }}
      beforeUpdate={(item) => {
        return item
      }}
      afterUpdate={(item) => {
        console.log(item)
      }}
      beforeDelete={(item) => {
        return item
      }}
      afterDelete={(item) => {
        console.log(item)
      }}
    />
  )
}

Props

Methods

Screenshots

License

MIT © sinankarakaya