@lovelope/table-factory
TableFactory is a combinable higher order components for list management page, in order to fetch list data and manage filter queries.
Install
npm i -S @lovelope/table-factory
# OR
yarn add -S @lovelope/table-factoryUsage
import TableFactory from '@lovelope/table-factory';
import React from 'react';
import { getGoodsList } from './services';
@TableFactory({
getAction: getGoodsList,
params: { pid },
mute: ['searchWords'],
})
class GoodsList extends React.Component {
render() {
const {
data: { list },
query,
loadData,
onFilter,
onReset,
} = this.props;
return (
<div>
<div className="header">
<YourFilter onFilter={onFilter} query={query} onReset={onReset} />
</div>
<div className="body">
<Table dataSource={list} />
</div>
</div>
);
}
}Options
TableFactory
| Property | Description | type | required | default |
|---|---|---|---|---|
| immediate | Used to control whether requests for data are sent immediately when filter conditions change | boolean | false | true |
| enums | Modify the request parameter name of the page number section of the page with a set of objects (page, page Size by default) | object | false | { page: 'page', pageSize: 'pageSize' } |
| mute | Control request parameters that do not immediately send requests (such as keyword search, which may not be immediately searched if you want to enter) | string[] | false | ['keyword'] |
| getAction | Request for table data | () => Promise<object> | true | -- |
| params | Additional Possible Parameters of getAction in addition to Screening Conditions | object | false | {} |
| format | Data Processing Function of getAction before Initiating Request | function | false | p => p |
Tips
-
TableFactoryinjects data, query, onFilter, onReset and loadData five props into the component. -
datais the data returned bygetAction. -
onFilteris a method of passing parameters to tableFactory. It receives two parameters. The first one is the parameter object, and the second one is the callback after reference. -
onReset, if the page needs to reset all requests plus parameters, you can use this method; -
loadData, an interface that actively calls table data; -
queryis the request parameter of getAction; you may need query to keep components under control. - If
paramssets additional request parameters,onResetwill not empty these parameters, which is also helpful when the timeselector returns to some initial value.