Multi-page Row Selection: Persist selected rows across pages when using serverPagination

[MaxInertia]

Feature Check list

• Agree to the Code of Conduct
• Read the README to ensure the feature is not already present
• You read Creating Issues, Features and Pull Requests
• Considered the value versus complexity for all users of the library as well as library maintenance
• Considered if this can be a storybook or documentation example

Is your feature request related to a problem? Please describe

Apparent inability to implement multi-page selection using this table.

Please let me know if I'm missing something obvious.

Describe the solution you'd like

A new prop for the Data Table that prevents clearing of selected rows when the page or sort is changed when using serverPagination. Possibly a prop for each of them. This prop would be optional with the default being false so existing programs are not modified.

These two cases in the reducer would be changed in the following way:

Note the addition of selectedRowsPersist

case 'SORT_CHANGE': {
      const { sortColumn, sortDirection, selectedColumn, selectedRowsPersist, pagination, paginationServer } = action;

      return {
        ...state,
        sortColumn,
        selectedColumn,
        sortDirection,
        currentPage: 1,
        // when using server-side paging reset selected row counts when sorting
        ...pagination && paginationServer && !selectedRowsPersist && ({
          allSelected: false,
          selectedCount: 0,
          selectedRows: [],
        }),
      };
    }

case 'CHANGE_PAGE': {
      const { page, paginationServer, selectedRowsPersist } = action;
      return {
        ...state,
        currentPage: page,
        // when using server-side paging reset selected row counts
        ...paginationServer && !selectedRowsPersist ({
          allSelected: false,
          selectedCount: 0,
          selectedRows: [],
        }),
      };
    }

Alternative prop names:

• persistSelectedRowsOnPageChange & persistSelectedRowsOnSortChange

Describe alternatives you've considered

• Supplying more information via the onSelectedRowsChange method that provides information required to implement multi-page selection in the user space. (More work than proposed solution as far as I can tell)

• Storing the selections outside this component and updating those selections when onSelectedRowsChange. The problem here is that onSelectedRowsChange returns the empty list of selections when pagination occurs, which fires prior to onChangePage, making it (seemingly) impossible to tell if the selections were cleared by the user intentionally or if it was due to the page changing. (Not viable)

Additional context

[MaxInertia]

Upon further inspection this would also require changing the following useEffect since it will clear the selected rows everytime we change the page as well.

react-data-table-component/src/DataTable/DataTable.js

Lines 159 to 167 in f7b55ab

	useEffect(() => {
	if (selectableRowSelected) {
	const preSelectedRows = data.filter(row => selectableRowSelected(row));
	dispatch({ type: 'SELECT_MULTIPLE_ROWS', selectedRows: preSelectedRows, rows: data });
	}
	// We only want to re-render if the data changes
	// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [data]);

[jbetancur]

This is the exact default behavior when client-side paging - that is, that selects are persisted. Are you using paginationServer and are looking to opt out of that? Sorry if I missed that in your description.

On a related note, I have a PR that I am working on that may or may not impact this. The feature is to allow only rows to be selected on visible rows.

#520

[MaxInertia]

@jbetancur Yes, this is specifically for when paginationServer is true. Looks like I didn't mention that in the feature request, will update.

As for #520, based on the request description in #518 that should only modify the behavior of the Select All feature, right? That shouldn't interfere with this feature unless I'm missing something. It's not as if that prevents the selection of elements from other pages, only that it adds an extra step required on the part of the user to do so... From the description:

In RDT (Selectable Rows), if user checks to select all items, it selects all the items in the table irrespective of items. If user checks to select all items, it selects only the visible ten or perPage items and user will be prompted in context menu with "Select all 146 data" similar to gmail.

[FullDev333]

Thanks