List is the component showing all under contents. It can be used for both location content(eg. article) and non-location content(eg. image)
A typical List use includes columns, sort, sort_default, pagination.
A list can have actions above the records(see actions property), or in row(see row_actions property). For more about actions see Config actions, Implement an action
//Show article under 10, with "name", "published", "modified" columnsconst listOption = {contenttype: "article"columns: ["name", "published", "modified"],sort_default: ["priority desc", "modified desc"],};<List id={10} {...listOption} />//Action with actions - link and componentconst articleActions = [{"link":"/main/edit/{id}", "name":"edit"},(actionProps:ActionProps)=><Copy {...actionProps} />];<List id={10} {...listOption} row_actions={articleActions} />
| Prop name | Type | Default | Required | Description |
|---|---|---|---|---|
| id | number | — | true | parent id of the list |
| contenttype | string | — | true | list’s content type |
| request_url | string | — | false | request url. useful when you use customized api |
| sort_default | Array<Array<string>> | [['id', 'desc']] | false | default sort eg. [[“published”, “desc”]] |
| sort | { string: string; } | — | false | sortable columns(an arrow will appear on the column). eg {“published”:”desc”, “priority”:”desc”}, where “desc” is the default order |
| columns | {} | — | true | columns which is the fields |
| show_header | boolean | — | false | show content type name as header, default false |
| show_table_header | boolean | — | false | show table head names(eg. ‘Name’) and sort icons |
| actions | {} | — | false | List actions above, eg. create, delete after selection |
| row_actions | {} | — | false | Actions on each record |
| level | number | 1 | false | Level of under parent. |
| viewmode | "list" | "block" | list | false | view mode of the list, default is ‘list’(row based) |
| pagination | number | — | false | Pagination, 0 means no pagination(1000 as limit) |
| onLinkClick | (content: any) => void | — | false | callback when clicking link(eg. link on name) |
| onRenderRow | (content: any) => string | — | false | onRenderRow, return classes(eg. “dm-row dm-row-image”) |