cloudscape-design / collection-hooks Goto Github PK

Description

Add a hyperlink to AWS in README.md

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate requests

Description

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
    },
  })

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate requests

Description

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

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate requests

Description

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!

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate requests

Description

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

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate requests

Browser

Chrome

Package version

v1.0.10

React version

v17.0.2

Description

Hi!
defaultSelectedItems is not working, table doesn't display default selected item.

Source code

No response

Reproduction

https://codesandbox.io/s/elastic-shockley-vw4u54?file=/src/table.tsx:432-452

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems