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

| Property | Type | Description | | ----------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------ | | row | JSON Array | You define the properties of the data that make up the table | | data | JSON Array | You can manually assign the data that make up the table here | | save | boolean | Save operation permission | | update | boolean | Update operation permission | | delete | boolean | Delete operation permission | | pagination | boolean | Show pagination | | remotePagination | boolean | If this feature is active, limit and page parameters are sent at the end of the request. | | totalPageCountUrl | string | Required for pagination in the table. When you want the total number of records, it should be returned as {totalCount:0}. | | listItemUrl | string | The link to request the data whose properties we have specified in the row field | | saveItemUrl | string | The address to which the data filled in the saving form will be sent with the post request | | updateItemUrl | string | The address to which the data filled in the updating form will be sent with the put | | removeItemUrl | string | When the data is desired to be deleted, the address to which the delete request will be sent by adding the id field to the end |

Methods

| Method | Description | | ------------ | ------------------------------------------------------------------------- | | onRowClick | Clicking on any row returns its data | | beforeSave | Returns the final version of the record to make changes before the save | | afterSave | Returns the response to the request for save | | beforeUpdate | Returns the final version of the record to make changes before the update | | afterUpdate | Returns the response to the request for update | | beforeDelete | Returns the final version of the record to make changes before the delete | | afterDelete | Returns the response to the request for delete |

Screenshots

License

MIT © sinankarakaya