BlankSlate
2 years ago
BulkActions
2 years ago
Filters
3 years ago
FormSelect
3 years ago
Input
3 years ago
InterweaveSSR
2 years ago
ListTable
2 years ago
ListTableHeaders
3 years ago
ListTablePage
2 years ago
ListTableRows
2 years ago
Pagination
3 years ago
ProductRecommendations
3 years ago
RowAction
3 years ago
Select
3 years ago
TableCell
3 years ago
ToggleSwitch
3 years ago
hooks
3 years ago
README.MD
3 years ago
api.ts
3 years ago
README.MD
117 lines
| 1 | # ListTablePage |
| 2 | |
| 3 | ## \<ListTablePage/\> Props |
| 4 | |
| 5 | | Prop | Type | Required | Default | |
| 6 | |------------|---------------------------------------------|----------|---------------------| |
| 7 | | data | Object: {items: Array} | Yes | - | |
| 8 | | columns | Array\<ListTableColumn\> | Yes | - | |
| 9 | | title | String | Yes | - | |
| 10 | | singleName | String | No | __('item', 'give') | |
| 11 | | pluralName | String | No | __('items', 'give') | |
| 12 | | error | Object/Bool | No | false | |
| 13 | | isLoading | Bool | No | false | |
| 14 | | align | String - `'start'`, `'center'`, or `'end'` | No | 'start' | |
| 15 | | rowActions | JSX function component | No | null | |
| 16 | | bulkActions | Array\<BulkActionsConfig\> | No | null | |
| 17 | | apiSettings | Object: {apiRoot: string, apiNonce: string} | Yes | - | |
| 18 | | filterSettings | Array\<FilterConfig\> | No | [ ] | |
| 19 | | children | ReactNode | No | null | |
| 20 | |
| 21 | ### data |
| 22 | |
| 23 | `data` is a plain JS object. It has one required property, |
| 24 | `data.items`, which is an array of objects where each object represents a row of data in the table. If you're using SWR, |
| 25 | this should be returned from the `useSWR` hook. |
| 26 | |
| 27 | ### columns |
| 28 | |
| 29 | An array that determines how columns will be displayed. By default, the columns will be displayed in array order. |
| 30 | |
| 31 | Each object in the array should contain the following properties: |
| 32 | |
| 33 | | Property | Type | Required? | Description | |
| 34 | |-------------|----------------------------------------------|-----------|---------------------------------------------------------------------------------------------------------------------------------------------------------| |
| 35 | | name | String | Yes | The property from `data.items` to associate the column with. | |
| 36 | | text | String | Yes | The label to display for the column. Should be translatable. | |
| 37 | | preset | String | No | Which default component we should use to render this column. If `preset` and `render` are both missing, the column will just display as a plain string. | |
| 38 | | render | Function | No | A React functional component that takes one argument, `item`, and returns some JSX . | |
| 39 | | addClass | String | No | A class name that will be added to the `<td>` element that wraps each table cell. | |
| 40 | | inlineSize | String<br/>(CSS length) | No | The width of the column. Takes any valid CSS length, like `'300px'` or `'50%'`. Default is `'8rem'`. | |
| 41 | | alignColumn | String<br/>`'start'`, `'center'`, or `'end'` | No | Alignment of the column's contents. If the `align` prop of `<ListTablePage/>` is set, will override it for this column only. | | | |
| 42 | |
| 43 | ### title |
| 44 | |
| 45 | Will be used as the title displayed at the top of the page. Also used to generate a visually hidden table caption for |
| 46 | accessibility. Should be translatable. |
| 47 | |
| 48 | ### singleName |
| 49 | |
| 50 | A lowercase string containing the term for a single table item. Will only be displayed if there's an error while |
| 51 | updating the table. Should be translatable. |
| 52 | |
| 53 | ### pluralName |
| 54 | |
| 55 | A lowercase string containing the term for multiple table items. Will only be displayed if there's an error while |
| 56 | updating the table. Should be translatable. |
| 57 | |
| 58 | ### error |
| 59 | |
| 60 | Whether to render the page in an error state. If you're using this without SWR, you can just treat `error` as a boolean. |
| 61 | If you're using SWR, this should be returned from the `useSWR` hook. |
| 62 | |
| 63 | ### isLoading |
| 64 | |
| 65 | Whether to show a loading overlay over the table contents. Row actions are not available while loading. If you're using |
| 66 | SWR, this should be the same as `isValidating` returned from the `useSWR` hook. |
| 67 | |
| 68 | ### apiSettings |
| 69 | |
| 70 | An object with two properties: `apiNonce`, the nonce used to authenticate with the Wordpress REST API, and `apiRoot`, |
| 71 | the root URL that this page will use for fetching data. |
| 72 | |
| 73 | ### filterSettings |
| 74 | |
| 75 | An array that determines what inputs to display above the table. By default, the filters will be displayed in array |
| 76 | order. |
| 77 | |
| 78 | Each object in the array should contain the following properties: |
| 79 | |
| 80 | | Property | Type | Required? | Description | |
| 81 | |----------|--------------------|----------------------------------|-------------------------------------------------------------------------------------------------------------------| |
| 82 | | name | String | Yes | The property from `data.items` to associate the column with. | |
| 83 | | type | String | Yes | What kind of filter to display. <br/> Available types: `select`, `formselect`, `search` | |
| 84 | | ariaLabel | String | Yes | A description of the filter for screen readers. | |
| 85 | | inlineSize | String<br/>(CSS Length) | No | The inline size of the filter. Corresponds to the width in left-to-right languages. Accepts any valid CSS length. | |
| 86 | | options | Array | For type `select` or `formselect` | What options to include for the `select`. An array of objects that look like `{value: 1, text: 'option 1'}` | |
| 87 | | text | String | No | Used as a placeholder value for `select` or `search` filters | |
| 88 | |
| 89 | ### rowActions |
| 90 | |
| 91 | A React functional component. Used to display markup that will show when hovering over a row. Takes the following props: |
| 92 | |
| 93 | | Prop | Type | Description | |
| 94 | |-----------|------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| |
| 95 | | data | Object: {items: Array} | The data object. <br/> See the `data` entry above. | |
| 96 | | item | Object | The information for a specific row. <br/> See the `data` entry above. | |
| 97 | | addRow | Function | Show an animation of an item being added to the table. <br/> Takes a callback (for example, a fetch to an API that will create a new row), returns a function which executes the callback and shows the animation. | |
| 98 | | removeRow | Function | Show an animation of an item being removed from the table. <br/> Takes a callback (for example, a request to an API to that will delete a row), returns a function which executes the callback and shows the animation. | |
| 99 | |
| 100 | ### bulkActions |
| 101 | |
| 102 | An array that determines what bulk actions display above the table. Will be displayed in array order. |
| 103 | |
| 104 | When a user selects a bulk action and one or more row checkboxes then clicks 'Apply', a confirmation modal will pop up. |
| 105 | After clicking 'Confirm' in that modal, the action will be applied. |
| 106 | |
| 107 | Each object in the array should contain the following properties: |
| 108 | |
| 109 | | Property | Type | Required? | Description | |
| 110 | |-----------|--------------------------------------------------------|-----------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| |
| 111 | | label | String | Yes | The label for the bulk action option. Also used for the title of the confirmation window. Should be translatable. | |
| 112 | | value | String or Number | Yes | The internal value for the bulk action option.<br/>Each `value` should be unique. | |
| 113 | | action | Function: (selected) => Promise\<{errors, successes}\> | Yes | The function that gets run when the user has confirmed the bulk action. Takes one argument, `selected`, which contains an array of IDs for the selected items. Returns an object with the number of successful and failed changes. | |
| 114 | | confirm | Function: (selected, names) => (String or JSX element) | Yes | A string or React component that gets displayed in the confirmation modal. Takes two arguments: `selected`, which contains an array of IDs for the selected items, and `names`, an array of names. Both values are strings. The `names` array will only contain elements if the `item` object (see above) has a `name` or `donorName` property. | |
| 115 | | isVisible | Function<br/> (data, options) => Boolean | No | What options to include for the `select`. An array of objects that look like `{value: 1, text: 'option 1'}` | |
| 116 | | type | String<br/>`'normal'`, `'warning'`, or `'danger'` | No | Determines what type of styling to apply to the bulk action confirmation modal.<br/>`'normal'` (default) - green border<br/>`'warning'` - yellow border<br/>`'danger'` - red border | |
| 117 |