cloudscape-design / collection-hooks Goto Github PK
View Code? Open in Web Editor NEWReact hooks for collections in Cloudscape Design System
Home Page: https://cloudscape.design/
License: Apache License 2.0
React hooks for collections in Cloudscape Design System
Home Page: https://cloudscape.design/
License: Apache License 2.0
Add a hyperlink to AWS in README.md
Currently in v1.0.3, all unique values defined in filteringProperties are added to filteringOptions.
This is a problem from a memory and performance standpoint when you want to target filtering but do not want to have a choice.
(e.g., when the number of items with unique values is large)
On the surface, this can be done by removing the following
const filteringProperties = [
{
key: 'prop1',
operators: ['='],
propertyLabel: 'Prop1',
groupValuesLabel: 'Prop1 values',
},
{
key: 'prop2',
operators: [':'],
propertyLabel: 'Prop2',
groupValuesLabel: 'Prop2 values',
},
]
const { propertyFilterProps, ...rest } = useCollection(allItems, {
propertyFiltering: {
filteringProperties,
},
})
const excludeFilteringOptionsKeys = ['prop2']
return (
<PropertyFilter
{...propertyFilterProps}
filteringOptions={propertyFilterProps.filteringOptions.filter(
(v) => !excludeFilteringOptionsKeys.includes(v.propertyKey),
)}
i18nStrings={{......}}
/>
)
However, this is not desirable because it would be wasteful in terms of processing.
So I would like to have the following new options added.
const filteringProperties = [
{
key: 'prop1',
operators: ['='],
propertyLabel: 'Prop1',
groupValuesLabel: 'Prop1 values',
},
{
key: 'prop2',
operators: [':'],
propertyLabel: 'Prop2',
groupValuesLabel: 'Prop2 values',
isExcludeOptions: true, // like this
},
]
const { propertyFilterProps, ...rest } = useCollection(allItems, {
propertyFiltering: {
filteringProperties,
},
})
or
const { propertyFilterProps, ...rest } = useCollection(allItems, {
propertyFiltering: {
filteringProperties,
excludeFilteringOptionsKeys: ['prop2'], // like this
},
})
Hello ๐ ,
The useCollection
hook has proven to be very useful with the Cloudscape Table
component and it is amazing, thank you guys.
I've got an application with extensive usage of the both (hook and Table component) and because all tables needed all table features was decided to implemented it in a generic way.
Something like so:
// AppTable.tsx component
const useCollectionResult = useCollection<T>(data, {
pagination: { pageSize: preferencesAtomState!.pageSize },
propertyFiltering: {
filteringProperties: filteringProperties,
},
filtering: {},
sorting: { ...collectionHookOptions?.sorting },
selection: {
keepSelection: true,
trackBy: otherTableProps.trackBy,
defaultSelectedItems,
},
});
The hook handles all logic with table sorting/selection/filtering etc., but there is a issue when the parent component of the generic AppTable
needs to modify something in the table (for example the selectedItems
).
And there is currently no proper way to do it from the parent component.
Intercept of onSelectionChange
can set the parent component selectedItems
state and notify when it changes like so:
// AppTable.tsx component
const interceptoOSelectionChange = (event) => {
actions.setSelectedItems(event.detail.selectedItems);
props.onSelectionChange?.(event.detail.selectedItems);
};
But when the selectedItems
are passed as props to AppTable
(that internally has its own collectionProps.selectedItems
state) it is hard to keep it in sync with the useCollection hook internal state.
A workaround would be using an useEffect
in AppTable
in order to listen when parent component changes the selectedItems
and updating the useCollection selectedItems
state by invoking the right action
setter.
// AppTable.tsx component
useEffect(() => {
console.log(
"selected items changed from parent component: ",
props.externalSelectedItems
);
// you can do a diff here between collectionProps.selectedItems and externalSelectedItems
// to call actions.setSelectedItems only when those are different
actions.setSelectedItems(props.externalSelectedItems);
}, [props.externalSelectedItems]);
This is quite inconvenient and results into a lot of manual syncing between the Parent component state and generic table component state.
I think this could be easily solved by extending the UseCollectionOptions<T>
selection
option (and other if needed) with
props from TableProps
selectedItems: T[].
onSelectionChange: NonCancelableEventHandler<TableProps.SelectionChangeDetail<T>>;
and if provided directly to the useCollection hook it will represent the single source of truth
const useCollectionResult = useCollection<T>(data, {
// ... other properties
selection: {
onSelectionChange: props.onSelectionChange,
selectedItems: props.selectedItems
},
});
Here is a small repro of the current workaround
Let me know what do you think
Currently it is possible to apply filteringProperties
with just one level deep of nesting. It'd be cool if it'd be possible to have key
attribute accept an array of keys (nested keys) and filter them by nested values.
e.g.:
{
propertyLabel: 'Cluster',
key: 'cluster',
groupValuesLabel: 'Cluster values',
operators: [':', '!:', '=', '!='],
},
this assumes we have cluster
key in our T
from allItems: T[]
desired API would look like:
{
propertyLabel: 'Cluster',
key: ['workspace', 'cluster'],
groupValuesLabel: 'Cluster values',
operators: [':', '!:', '=', '!='],
},
and our item should have a property workspace
with object as value and with cluster
field on it.
{
...otherFields,
workspace: {
cluster: 'cluster 1'
}
}
Thanks!
Hi,
Using always useCollectionResult.actions.setSelectedItems(newItemsArray)
is not very convenient.
Would be nice to have the possibility to use a similar syntax as for useState
setter function
useCollectionResult.actions.setSelectedItems(prevSelectedItems => [...prevSelectedItems, newItem])
Chrome
v1.0.10
v17.0.2
Hi!
defaultSelectedItems
is not working, table doesn't display default selected item.
No response
https://codesandbox.io/s/elastic-shockley-vw4u54?file=/src/table.tsx:432-452
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.