1.0.7 • Published 3 years ago

react-antd-itemslist v1.0.7

Weekly downloads
187
License
MIT
Repository
github
Last release
3 years ago

react-antd-itemslist

react and antd based component:

  • show a list of objects as a table
  • Add buttons to add, delete items
  • Reload and search table
  • Pagination
  • Add, Edit, Delete using standard methods (axios.get, axios.put, axios.post, axios.delete) on a base URL + item key
  • List items using standard method (axios.get) on a list URL
  • Custom methods support for each of the above actions
  • Editor hookups to add/edit item

Dependencies and Peer Dependencies

reactjs and antd are assumed to be used by the parent app with appropriate css (e.g antd/dist/antd.css) already loaded by your app

Install

npm install --save react-antd-itemslist

Import Component

import ItemsList from 'react-antd-itemslist';

Usage

import React from 'react'
import ItemsList from 'react-antd-itemslist'
import 'antd/dist/antd.css'

export default class App extends React.Component {
    columns = [
        {
            title: 'User Id',
            dataIndex: 'login'
        }
    ]
    render() {
        return <ItemsList
            itemsListUrl="https://api.github.com/users"
            columns={this.columns}
        />
    }
}

Look at Examples for more options

Here is a link to the codesandbox

Properties

NameDescription
tableTitleTitle for the table. String or a ReactNode
tableTitleIconIcon before the title. Default shows a list icon. false/null hides the icon. Icon must be a ReactNode. eg. <DashboardOutlined />. Instead of an Icon, you can provide any valid ReactNode
tableTitleStyleCustom CSS Style object to apply for the title
tableActions"default", false or a ReactNode. "default" shows Add, Delete, Reload buttons on the left and a search bar on the right (all these elements are customizable). false does not render the buttons and the search
actionButtonsSpanNumber of antd columns to span for the left section (buttons), default 8. 0 hides the action buttons
searchSpanNumber of antd columns to span for the left section (buttons), default 16. 0 hides the search bar
addButtonTitlestring or ReactNode or false. Default is "Add". Empty string just shows the icon
addButtonActionFunction to call on clicking the button. Default shows the editor used to add an item - editor component is supplied as a prop (explained later in this document)
deleteButtonTitlestring or ReactNode or false. Default is "Delete". Empty string just shows the icon
reloadButtonTitlestring or ReactNode or false. Default is "Reload". Empty string just shows the icon
itemsListUrlURL that returns a list of objects. You can skip this and provide a custom method (explained later) to get the list of items. The component calls axios.get(this.props.itemsListUrl). Check this section for the expected format of the output
itemBaseUrlBase URL used for edit (put), delete methods. The url is suffixed with the id of the item and does a axios.delete(this.props.itemBaseUrl + '/' + item[this.props.dataKey]). You can skip this and provide a custom methods to handle edits and delete
itemsListMethodFunction to call to get the list of items. The function should return a promise and must resolve with 'data' attribute to get the response similar to axios.get
itemGetMethodCustom function called to get a single item (when the user views a specific record). The function is called with the table row object. Default axios.get(this.props.itemBaseUrl + '/' + item[this.props.dataKey]) or customFuction(record). The function must return a promise that resolves with 'data' attribute to get the resposne, similar to axios.get
itemAddMethodCustom function called to add a new record. An editor (explained below) can be provided for the user to enter the details of a new item to add. Once the user clicks to add, the itemAddMethod is called with the values in the editor form. Defaults to axios.post(this.props.itemsListUrl, formValues) or customFunction(formValues)
itemDeleteMethodCustom function called to delete a record. Defaults to axios.delete(this.props.itemBaseUrl + '/' + item(this.props.dataKey]) or customFunction(record)
itemsDeleteMethodCustom function called to delete multiple records. Defaults to deleting each record individually using the itemDeleteMethod or customFunction(listOfrecords)
reformatListMethodFunction called after a call to itemsListMethod. You can customize the data and return the object or array of items as required by the component. The data returned must be an array or an object. Check itemsListMethod
dataKeyThe key or the unique id of each item in the array of data objects. Defaults to id
columnsThis is the antd columns object. Its a list of objects used to display the table. Check Columns for more details
indexColShow serial number (index) for each row. true/false. Defaults to true (show the number for each row)
indexColViewLinkMake the indexCol clickable so it shows the details, like viewItemLink above
rowActionsAn array of actions to show at each row. The valid values in the array are ['deleteItem', 'editItem']
paginationtrue/false. Defaults to false. Show the pagination. It requires the list method to return the data as object with appropriate count, page and page_size attributes
rowSelectiontrue/false. Defaults to true. Show a checkbox at each row so that multiple items can be deleted
itemViewerView"drawer" or "modal". Defaults to "drawer". Show the details of the item in this view
itemViewerWidthWidth in percentage for the drawer or the modal. Defaults to "50%"
itemViewerCustom function that's called with the itemDetails record and must return a ReactNode to display. Default shows the table columns data in a columnar table
itemViewerTitleFunction called to return a title (ReactNode) for the viewer. Defaults to "Details of $rowIndex - $recordthis.props.dataKey
itemViewerEditLinktrue/false. Show an "Edit" button in the viewer
editorView"drawer" or "modal". Defaults to "drawer". Show the details of the item in this view
editorWidthWidth in percentage for the drawer or the modal. Defaults to "50%"
editorAddModeTitleTitle to show in the editor view when adding a new item. Defaults to "Add"
editorEditModeTitleTitle to show in the editor view when editing an existing item. Defaults to "Edit"
editorEditor component name. Check the requirements for the editor component
editorAddModeOkButtonTitleOK Button Title of the Editor in Add mode. Defaults to "Add"
editorAddModeCancelButtonTitleCancel Title of the Editor in Add mode. Defaults to "Cancel"
editorEditModeOkButtonTitleOK Button Title of the Editor in Edit mode. Defaults to "Save"
editorEditModeCancelButtonTitleCancel Title of the Editor in Edit mode. Defaults to "Cancel"
editorPropsObject that's passed as props to the editor
onSearchChangeFunction to call when the user searches. Function is called with the search value entered. Defaults to changing the URL by adding an argument defined in searchUrlParameter. Default handler needs access to history attribute from the route (react-router-dom)
searchUrlParameterIf onSearchChange is not defined, the default behaviour on search is to change the URL by adding an argument with name defined here. Defaults to "search". E.g https//www.myapp.com?search=search-value
onPagerChangeFunction to call when the user changes the page or the page size. function(page, pageSize). Defaults to changing the URL by adding arguments pageUrlParameter=page&pageSizeUrlParameter=pageSize. The URL parameters default to "page" and "page_size". Default handler needs access to history attribute from the route (react-router-dom)
pageUrlParameterFor the default pagination handler that updates the URL, use this as the parameter name, defaults to "page"
pageSizeUrlParameterFor the default pagination handler that updates the URL, use this as the parameter name, defaults to "page_size"
reloadKeyUsed by the component to check if it needs to do a call to get the list of items. By default it checks the URL and compares with the previous URL and it they are not same, reloads the list of items. This should be sufficient to handle reloads in case of changes. However if the component is embedded in other pages where the URL is not changed, then provide a value here that helps the component to trigger a reload

Structure of List Items

If you use custom itemsListMethod with reformatListMethod or the default axios.get(this.props.itemsListUrl) the calls must return either a list of objects or an object with the following keys:

  • items - array of data objects
  • count - Total number of items available. If you are using pagination, this can be the total count of items in the database (e.g 100000). If this is not provided, defaults to the length of the array

Columns

The definition of columns is as follows:

[
    {
        title: 'Column 1',
        dataIndex: 'data attribute of the object in the list'
    },
    {
        title: 'Column 2',
        dataIndex: 'data attribute of the object in the list',
        render: (colData, record, colIndex) => {
            return customRenderer
        }
    }
]

On top of the antd column definition, you can add another attribute called viewItemLink: true on a column, and it makes this column clickable to view the details of the item

{
    title: 'ViewDetails Column',
    dataIndex: 'idField',
    viewItemLink: true
}

Editor

  • Editor must have a form with name as "editor-form"
  • Editor is passed editorMode="add" or editorMode="edit" to inform if its in add/edit mode
  • Editor is passed editorValues={valuesObject} with values of the current record (in edit mode) and must take decisions on whether to show a field or not in edit mode
  • Editor must call this.props.onSubmit(valuesObject) in onFinish handler.

Look at the example for a sample of the editor component