DataGrid filter panel only filter for current loaded data.

[seonyukim]

What package(s) are you using?

• [X] Carbon for IBM Products (or Carbon for IBM Cloud & Cognitive)
• [ ] Legacy/CDAI
• [ ] Legacy/Security

Detailed description

Describe in detail the issue you're having.

DataGrid filtering does this all internally on the data provided. We grab data per page, so this filter would only filter the current page of data. Is there a way to:

• enable manual filtering so that it is not internally filtering on the current data
• grab the filter props, and on apply retrieve those props and create our own query to api
• set those filter tags but return only the data from api
• setAllFilters that could be used externally, but when trying to set that function it never got called.

Is this issue related to a specific component?

yes, DataGrid component

What did you expect to happen? What happened instead? What would you like to see changed?

Be able to use filter data in the api layer (detail is above)

What browser are you working in?

What version of the @carbon/ibm-products (or @carbon/ibm-cloud-cognitive) package are you using?

V2.4.0

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

CP4S QRadar suit. We were waiting for the filter panel long time. Without this functionality, the filter panel is useless to us. We need this functionality as soon as possible.

Steps to reproduce the issue

1. Step one
2. Step two
3. Step three
4. etc.

Please create a reduced test case in CodeSandbox

https://codesandbox.io/s/github/carbon-design-system/ibm-products/tree/main/examples/carbon-for-ibm-products/SidePanel

Additional information

Here is the slack message: https://ibm-security.slack.com/archives/C013ZTX0N6B/p1689602026794799

• Screenshots or code
• Notes

[AlexanderMelox]

Hey @seonyukim , can you show us an example of how you would like to manually filter the data? You can currently do this by passing in a setAllFilters hook

[AlexanderMelox]

That was enabled in this PR

[seonyukim]

@AlexanderMelox Can you check this Slack thread? We posted what we wanted and how we use setAllFilters and that is not working

[AlexanderMelox]

The slack thread isn't working for me, I'm not in the IBM Security workspace. May you take screen shots?

[seonyukim]

oops I forgot to add thread link https://ibm-security.slack.com/archives/C013ZTX0N6B/p1689602026794799 But basically, setAllFilters could be used externally, but when trying to set that function it never got called. setAllFilters that could be used externally, but when trying to set that function it never got called. Can you explain what the intended behaviour of this is?

[AlexanderMelox]

We us React table v7 under the hood. And this is the setAllFilters hooks they provide. https://github.com/TanStack/table/blob/v7/docs/src/pages/docs/api/useFilters.md#instance-properties

[AlexanderMelox]

Then in our component you would just use it like this

const datagridState = useDatagrid({
   ...
}, useFilters)

const {setAllFilters} = datagridState;

<button onClick={() => setAllFilters([ { id: 'name',  value: 'John' } ])}>click</button>

[seonyukim]

Basically, we don't load all the data into a table at once. We have millions of data in some cases. We load the first set of data(first page) with pagination. If we do the filter only on the loaded data, this is useless in our case. I don't think setAllFilters is not for this case. I might misunderstand.

[AlexanderMelox]

@matthewgallo would you have any input on this?

[xmannyxfreshx1]

Hi all, Perhaps I could offer some insight, for manual filtering (and sorting) you'll need to pass in the manualFilters: true option to the useDatagrid hook. Then to get the options selected, they're available in the datagridState instance. The summary tags are still set but the table will not filter your data until you make an api request. Hope that helps!

const datagridState = useDatagrid({
columns,
data,
...,
manualFilters: true,
manualSortBy: true,
}, useFilters)

const {
    state: {
      sortBy,
      filters
    }
} = datagridState;

[AlexanderMelox]

@seonyukim Check @xmannyxfreshx1 comment, someone else had this issue and they were able to get it to work 🚀

[colincarle]

@AlexanderMelox: For clarity... the supported solution will be the snippet provided by @xmannyxfreshx1? Will this be documented formally? (FYI @seonyukim, we'll discuss on your return.)