@paprika/action-bar

Description

ActionBar

Installation

``
yarn add @paprika/action-bar
`

or with npm:

`
npm install @paprika/action-bar
`

Props

$3

| Prop | Type | required | default | Description |
| -------- | ---- | -------- | ------- | ----------- |
| children | node | true | - | |

$3

| 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 | |

$3

| 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

Action Bar component contains 2 individual widgets.

and

$3

> npm install --save @paprika/action-bar
or
> yarn add @paprika/action-bar

$3

#### Sort

`js




`

More detail about props

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) => (
key={field.id}
{...field}
onDelete={handleDelete(field.id)}
onChange={handleChange(field.id)}
isFirst={index === 0}
/>
))}


// display sortedData
);
`

#### ColumnsArrangement

`js
columns={orderedColumns}
onChangeOrder={handleChangeOrder}
onHideAll={handleHideAll}
onShowAll={handleShowAll}
onChangeVisibility={handleChangeVisibility}
/>
`

More detail about props

You can also use the hook useColumnsArrangement

`js
const {
orderedColumnIds,
onChangeVisibility,
onShowAll,
onHideAll,
onChangeOrder,
isColumnHidden,
} = useColumnsArrangement({ defaultOrderedColumnIds });

return (
orderedColumnIds={orderedColumnIds}
onChangeOrder={onChangeOrder}
onHideAll={onHideAll}
onShowAll={onShowAll}
onChangeVisibility={onChangeVisibility}
>
id="columnId"
label="Column label"
isDisabled={false}
isHidden={isColumnHidden("columnId")}
/>

);
``

Links

- Storybook Showcase
- GitHub source code
- Create GitHub issue
- CHANGELOG