Así que estoy usando el componente de tabla de Ant Design. También he habilitado las casillas de verificación para que se puedan usar en la tabla.
El escenario que quiero lograr es este.
por ejemplo, hay 10 páginas de datos en la tabla. El usuario marca 3 elementos en la primera página y luego pasa a la segunda página. Allí marca 4 elementos más y luego vuelve al primero. Cuando regresa al primero, los primeros 3 elementos que seleccionó todavía están marcados (marca de verificación azul), lo que da un total de 7 elementos marcados.
¿Cómo lograr esto?
Este es mi componente de paginación
<Pagination current={pageNumber} pageSize={pageSize} pageSizeOptions={[10, 20, 50, 100]} onChange={(e) => { setTriggerPage(!triggerPage); setPageNumber(e); }} total={totalCardCount} locale={{ items_per_page: "/ stranica" }} className="mt20" showLessItems={true} hideOnSinglePage={false} onShowSizeChange={(e, size) => setPageSize(size)} showSizeChanger={true} />Este es el componente de la tabla.
<Table rowSelection={rowSelection} dataSource={data} pagination={false} loading={loading} rowKey={"id"} style={{ cursor: "pointer" }} scroll={{ y: 400 }} >Esta es la propiedad de selección de fila de la tabla.
const rowSelection = { selectedRowKeys: selectedRow.map((row) => row.id), onSelectAll: (selected, selectedRows) => { setSelectedRow(selectedRows); }, };Debido a que está utilizando paginación en AntD, simplemente puede crear un objeto de estado (como un objeto con el valor clave del número de página, por ejemplo) y luego agregar las filas seleccionadas dentro como una matriz. Entonces, cada vez que necesite representar su tabla, puede leer los valores de las casillas de verificación del estado y luego mostrar la opción marcada.
si necesita ver el número total de elementos seleccionados, simplemente puede manipular los estados que tiene para ver el número total, o si está mostrando esto en otros componentes y páginas, necesita usar el contexto.