React Fields Keeper
Examples
1. Sample use-case
Bucket 1
a
Bucket 2
b
c
Bucket 3
Add data fields here
Root Bucket
a
b
c
d
2. Highlighting targeted items
Bucket 1
a
Bucket 2
b*
c
Bucket 3
Add data fields here
Root Bucket
a
b*
c
d
3. Grouping items
Bucket 1
Date long group header sample pass
Year
Quarter
Month
Day
Bucket 2
Add data fields here
Bucket 3
Add data fields here
Root Bucket
Date long group header sample pass
Year
Quarter
Month
Day
b
c
d
4. Using custom priority bucket filler
Bucket 1
Date long group header sample pass
Year
Quarter
Month
Day
Bucket 2
Add data fields here
Bucket 3
Add data fields here
Root Bucket
Date long group header sample pass
Year
Quarter
Month
Day
b
c
d
5. Disabling fields / Tooltip provision
(on both root and individual buckets)
(on both root and individual buckets)
Bucket 1
A
a
Bucket 2
b
c
Bucket 3
Add data fields here
Root Bucket
A
a
b
c
d
6. Controlled state handler
(Expect at-least one data item to be selected)
(Expect at-least one data item to be selected)
Bucket 1
a
Bucket 2
b
c
Bucket 3
Add data fields here
Root Bucket
a
b
c
d
7. Nested fields keeper use-case
Instance 1 - BucketsInstance 2 - Buckets
Instance - 1 - Bucket 1
a
Instance - 1 - Bucket 2
b
c
Instance - 1 - Bucket 3
Add data fields here
Instance - 2 - Bucket 1
a
Instance - 2 - Bucket 2
b
c
Instance - 2 - Bucket 3
Add data fields here
Instance - 1
Instance - 2
Root Bucket
a
b
c
d
Instance - 2
Root Bucket
a
b
c
d
8. Custom bucket item renderer
Bucket 1
a
Under Development!
Bucket 2
b
c
Bucket 3
Add data fields here
Root Bucket
a
b
c
d
9. Root bucket without input checkbox
Bucket 1
a
Bucket 2
b
c
Bucket 3
Add data fields here
Root Bucket
a
b
c
d
10. Show Extended Assignment Placeholder
Bucket 1
a
Add data fields here
Bucket 2
b
c
Add data fields here
Bucket 3
Add data fields here
Root Bucket
a
b
c
d
11. Granular style customization
Bucket 1
a
Bucket 2
b
c
Bucket 3
Add data fields here
Root Bucket
a
b
c
d
12. Horizontal fields bucket
Root Bucket
Hello world
Majestic
Magnificent
Dancing rose
Hello world - 1
Majestic - 1
Magnificent - 1
Dancing rose - 1
Hello world - 2
Majestic - 2
Magnificent - 2
Dancing rose - 2
Date long group header sample pass
Year
Quarter
Month
Day
Bucket 1 - scroll style
Hello world
Majestic
Magnificent
Dancing rose
Bucket 2 - wrap style
Hello world - 1
Majestic - 1
Magnificent - 1
Dancing rose - 1
Bucket 3 - vertical filling
Hello world - 2
Majestic - 2
Magnificent - 2
Dancing rose - 2
Bucket 1 - horizontal hierarchy support
Date long group header sample pass
Year
Quarter
Month
Day
13. Root bucket with custom searcher
Bucket 1
a
Bucket 2
b
c
Add data fields here
Root Bucket
a
b
c
d
14. Cross instance field items sharing support
Instance 1
Bucket 1
a
Bucket 2
b
c
Bucket 3
Add data fields here
Instance 2
Bucket 1
a
Bucket 2
b
c
Bucket 3
Add data fields here
Instance 1
Root Bucket
a
b
c
d
15. Bucket max items restriction
Bucket 1 (with max assignment of 2)
a
Bucket 2
b
c
Bucket 3
Add data fields here
Root Bucket
a
b
c
d
16. Allow duplicate field items
Bucket 1
a
a
Bucket 2
b
c
Bucket 3
Add data fields here
Root Bucket
a
b
c
d
17. Should render prop for root bucket items
Bucket 1
a
a
Bucket 2
b
c
Bucket 3
Add data fields here
Root Bucket
b
c
d
18. Suffix nodes support for Root bucket items
Bucket 1
a
Bucket 2
b
c
Bucket 3
Add data fields here
Root Bucket
a
b
c
Date long group header sample pass
Year
Quarter
Month
Day
19. Disabled buckets
Bucket 1
a
Bucket 2
b
c
Bucket 3
Add data fields here
Root Bucket
a
b
c
d
e
f
g
h
20. Folder Scoping
Bucket 1
a
Bucket 2
b
c
Bucket 3
Add data fields here
Root Bucket
Folder 1
a
b
Folder 2
c
d
Date long group header sample pass
Year
Quarter
Month
Day
21. Prefix Node Support for Root bucket items
Bucket 1
a
Bucket 2
b
c
Bucket 3
Add data fields here
Root Bucket
Folder 1
a
b
Folder 2
c
d
Date long group header sample pass
Year
Quarter
Month long string test pass
Day
22. Bucket types!
String
a
Number
2
3
Any
false
b
Field without types array
Add data fields here
Root Bucket
a
b
c
1
2
3
true
false
Field without type
23. Disable Field Assignments
Bucket 1
a
Bucket 2
b
c
Bucket 3
Add data fields here
Root Bucket
Folder 1
a
b
Folder 2
c
d
Date
Year
Quarter
Month
Day
24. Filter Items
Bucket 1
a
Bucket 2
b
c
Bucket 3
Add data fields here
Pinned
No data found
All Items
Folder 1
a
Pin
b
Pin
Folder 2
c
Pin
d
Pin
Date
Pin
Year
Pin
Quarter
Pin
Month
Pin
Day
Pin
25. Accent Color
Bucket 1
a
Bucket 2
b
c
Bucket 3
Add data fields here
Root Bucket
Folder 1
a
b
Folder 2
c
d
Date
Year
Quarter
Month
Day
26. Edit Field Label
Bucket 1
a
Bucket 2
b
c
Bucket 3
Add data fields here
Root Bucket
Folder 1
a
b
Folder 2
c
d
Date
Year
Quarter
Month
Day
27. Group only selection
Bucket 1
Date
Bucket 2
Add data fields here
Bucket 3
Add data fields here
Root Bucket
Date
Year
Quarter
Month
Day
b
c
d
28. Nested Folder
Bucket 1
c
Bucket 2
d
e
Bucket 3
Add data fields here
Root Bucket
Folder 1
Folder 2
c
d
Folder 3
e
f
g
Folder 4
k
l
m
Date
Year
Quarter
Month long string test pass
Day
29. Source Id
Bucket 1
a
Bucket 2
b
c
Bucket 3
Add data fields here
Root Bucket
a
b
c
d
Date
Year
Quarter
Month
Day
30. Flat Group
Bucket 1
Add data fields here
Bucket 2
Add data fields here
Bucket 3
Add data fields here
Root Bucket
Folder 1
a
b
Folder 2
c
d
Date
Date Hierarchy
Year
Quarter
Month
Day
time
seconds
31. Custom Styling using custom classname
Bucket 1
Add data fields here
Bucket 2
Add data fields here
Bucket 3
a
b
Date
Year
Quarter
Month
Day
time
seconds
Root Bucket
Folder 1
a
b
Folder 2
c
d
Date
Date Hierarchy
Year
Quarter
Month
Day
time
seconds
32. Context Menu on right click
Bucket 1
a
Bucket 2
b
c
Bucket 3
Add data fields here
Root Bucket
a
b
c
Date long group header sample pass
Year
Quarter
Month
Day