ActionBar
npm install @paprika/action-barActionBar
```
yarn add @paprika/action-bar
or with npm:
``
npm install @paprika/action-bar
| Prop | Type | required | default | Description |
| -------- | ---- | -------- | ------- | ----------- |
| children | node | true | - | |
| Prop | Type | required | default | Description |
| ------------------- | ------- | -------- | ------- | ----------- |
| children | node | true | - | |
| orderedColumnIds | arrayOf | true | - | |
| onChangeOrder | func | true | - | |
| onChangeVisibility | func | true | - | |
| onHideAll | func | true | - | |
| onShowAll | func | true | - | |
| renderTriggerButton | func | false | null | |
| Prop | Type | required | default | Description |
| ----------------- | ------- | -------- | -------- | ----------- |
| appliedNumber | number | false | 0 | |
| children | node | false | null | |
| columns | arrayOf | true | - | |
| isAddSortDisabled | bool | false | false | |
| onAddSort | func | true | - | |
| onApply | func | true | - | |
| onCancel | func | false | () => {} | |
| onClose | func | false | () => {} | |
| onOpen | func | false | () => {} | |
Action Bar component contains 2 individual widgets.
and
> npm install --save @paprika/action-bar> yarn add @paprika/action-bar
or
#### Sort
`js`
You can also use the hook useSort
`js
const { appliedNumber, sortedFields, sortedData, onAddSort, onDeleteSort, onChangeSort, onApply } = useSort({
columns,
});
const handleDelete = fieldId => () => {
onDeleteSort(fieldId);
};
const handleChange = fieldId => params => {
onChangeSort({ ...params, id: fieldId });
};
return (
{sortedFields.map((field, index) => (
{...field}
onDelete={handleDelete(field.id)}
onChange={handleChange(field.id)}
isFirst={index === 0}
/>
))}
// display sortedData
);
`
#### ColumnsArrangement
`js`
onChangeOrder={handleChangeOrder}
onHideAll={handleHideAll}
onShowAll={handleShowAll}
onChangeVisibility={handleChangeVisibility}
/>
You can also use the hook useColumnsArrangement
`js
const {
orderedColumnIds,
onChangeVisibility,
onShowAll,
onHideAll,
onChangeOrder,
isColumnHidden,
} = useColumnsArrangement({ defaultOrderedColumnIds });
return (
onChangeOrder={onChangeOrder}
onHideAll={onHideAll}
onShowAll={onShowAll}
onChangeVisibility={onChangeVisibility}
>
label="Column label"
isDisabled={false}
isHidden={isColumnHidden("columnId")}
/>
);
``
- Storybook Showcase
- GitHub source code
- Create GitHub issue
- CHANGELOG