Skip to content

DS Storybook - Add DataFilters story #5814

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jcfilben merged 7 commits into from
Feb 20, 2026
Merged

DS Storybook - Add DataFilters story #5814

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
83525b4
Add story for Search
jcfilben Feb 10, 2026
75b4231
address feedback from review
jcfilben Feb 10, 2026
fd86062
Change textAlign to commonArg
jcfilben Feb 12, 2026
5dd4665
Merge remote-tracking branch 'origin/master' into sb-search
jcfilben Feb 12, 2026
2c7f248
Add DataFilters story
jcfilben Feb 12, 2026
f32cbe2
Merge remote-tracking branch 'origin/master' into sb-datafilters
jcfilben Feb 12, 2026
38a6349
Add DataTable to example
jcfilben Feb 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
93 changes: 93 additions & 0 deletions shared/aries-core/src/stories/components/DataFilters.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { Data, DataFilter, DataFilters, DataTable } from 'grommet';

const meta = {
title: 'Components/DataFilters',
component: DataFilters,
argTypes: {
clearFilters: {
control: { type: 'boolean' },
},
drop: {
control: { type: 'boolean' },
},
heading: {
control: { type: 'text' },
},
layer: {
control: { type: 'boolean' },
},
},
} satisfies Meta<typeof DataFilters>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Default = {
name: 'DataFilters',
render: args => (
<Data
data={[
{
name: 'Bryan',
location: 'Fort Collins',
date: '2018-06-10',
percent: 30,
paid: 1234,
},
{
name: 'Chris',
location: 'Palo Alto',
date: '2018-06-09',
percent: 40,
paid: 2345,
},
{
name: 'Eric',
location: 'Palo Alto',
date: '2018-06-11',
percent: 80,
paid: 3456,
},
]}
>
<DataFilters {...args}>
<DataFilter property="name" />
<DataFilter property="location" />
<DataFilter property="percent" />
<DataFilter property="paid" />
</DataFilters>
<DataTable
columns={[
{
property: 'name',
header: 'Name',
},
{
property: 'location',
header: 'Location',
},
{
property: 'date',
header: 'Date',
},
{
property: 'percent',
header: 'Percent',
},
{
property: 'paid',
header: 'Paid',
},
]}
/>
</Data>
),
args: {
clearFilters: false,
drop: false,
heading: 'Filters',
layer: true,
},
} satisfies Story;