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

Name	Description
tableTitle	Title for the table. String or a ReactNode
tableTitleIcon	Icon 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
tableTitleStyle	Custom 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
actionButtonsSpan	Number of antd columns to span for the left section (buttons), default 8. 0 hides the action buttons
searchSpan	Number of antd columns to span for the left section (buttons), default 16. 0 hides the search bar
addButtonTitle	string or ReactNode or false. Default is "Add". Empty string just shows the icon
addButtonAction	Function 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)
deleteButtonTitle	string or ReactNode or false. Default is "Delete". Empty string just shows the icon
reloadButtonTitle	string or ReactNode or false. Default is "Reload". Empty string just shows the icon
itemsListUrl	URL 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
itemBaseUrl	Base 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
itemsListMethod	Function 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
itemGetMethod	Custom 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
itemAddMethod	Custom 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)
itemDeleteMethod	Custom function called to delete a record. Defaults to axios.delete(this.props.itemBaseUrl + '/' + item(this.props.dataKey]) or customFunction(record)
itemsDeleteMethod	Custom function called to delete multiple records. Defaults to deleting each record individually using the itemDeleteMethod or customFunction(listOfrecords)
reformatListMethod	Function 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
dataKey	The key or the unique id of each item in the array of data objects. Defaults to id
columns	This is the antd columns object. Its a list of objects used to display the table. Check Columns for more details
indexCol	Show serial number (index) for each row. true/false. Defaults to true (show the number for each row)
indexColViewLink	Make the indexCol clickable so it shows the details, like viewItemLink above
rowActions	An array of actions to show at each row. The valid values in the array are ['deleteItem', 'editItem']
pagination	true/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
rowSelection	true/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
itemViewerWidth	Width in percentage for the drawer or the modal. Defaults to "50%"
itemViewer	Custom 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
itemViewerTitle	Function called to return a title (ReactNode) for the viewer. Defaults to "Details of $rowIndex - $record[this.props.dataKey]
itemViewerEditLink	true/false. Show an "Edit" button in the viewer
editorView	"drawer" or "modal". Defaults to "drawer". Show the details of the item in this view
editorWidth	Width in percentage for the drawer or the modal. Defaults to "50%"
editorAddModeTitle	Title to show in the editor view when adding a new item. Defaults to "Add"
editorEditModeTitle	Title to show in the editor view when editing an existing item. Defaults to "Edit"
editor	Editor component name. Check the requirements for the editor component
editorAddModeOkButtonTitle	OK Button Title of the Editor in Add mode. Defaults to "Add"
editorAddModeCancelButtonTitle	Cancel Title of the Editor in Add mode. Defaults to "Cancel"
editorEditModeOkButtonTitle	OK Button Title of the Editor in Edit mode. Defaults to "Save"
editorEditModeCancelButtonTitle	Cancel Title of the Editor in Edit mode. Defaults to "Cancel"
editorProps	Object that's passed as props to the editor
onSearchChange	Function 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)
searchUrlParameter	If 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
onPagerChange	Function 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)
pageUrlParameter	For the default pagination handler that updates the URL, use this as the parameter name, defaults to "page"
pageSizeUrlParameter	For the default pagination handler that updates the URL, use this as the parameter name, defaults to "page_size"
reloadKey	Used 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