Selecting DataTable Programmatically

UI Components for React
Post Reply
smajli
Posts: 2
Joined: 30 Jan 2020, 09:58

30 Jan 2020, 10:25

Our needs for our app include ways of selecting that are not directly connected to the DataTable component. We have a Filter on the left side that gives us quick access to select all items that are in the DataTable by some shortcuts. I am going to give some examples and then I would like to receive a guide of how to approach this, and if there is any current solution implemented by the components themselves

Examples:

1. Ex: We have a Datepicker component, where we select the desired date, and then on a button click, I need to update the selected items in the list that have the same date. So something similar to like filtering works, but for selection.

2. Ex: From an API I retrieve all users that have paid for the service/subscribed. And I would like to select them all in the table. I only have the ID's available.

3. Question: Is there a possibility to select items in DataTable based on some ID instead of selecting the whole object. It would be my responsibility to keep track that the ID's are really unique. But in the end, the selected array would contain IDs instead of the whole objects. I encountered an unwanted 'bug' because of this. (Scenario: A user selects an item from the table, and then makes an edit operation on top of it, through a modal (another component), now the original data is changed, it is a new object with different deep compare values, I would like the selection to remain as is selected, with the logic being driven by the id of the object, which can't be allowed to change.


How would you access this problem?

Below is an example of what we have right now, but all the above mentioned would be features needed at some point
We have checkboxes that enable 'quick, bulk selection', and this is the real question I am asking, how would I do this? Because for the information I have ( client_name & purchase_date ) I can't select them easily from the table because table works with whole objects (I would have to reach to the API, find the whole object/s for the clicked dates and names and then pass those objects to the selected array, which seems a lot.)

This below visualization would be the <Tree selectionMode="checkbox" />

--- [ ] Select All Dates below (Selects all below-mentioned dates, in the table, there could be more dates, these are some dates returned from API that we care about)

--- [ ] 2020.01.20 (Selects all elements that have this date stamp on them)
---- [ ] Client 1 (Selects all elements that have the above date and are made by this Client 1)
---- [ ] Client 2
--- [ ] 2020.01.25
---- [ ] Client 3
--- [ ] 2020.01.29

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest