#javascript #reactjs #sorting #react-table
Вопрос:
Мне нужно отсортировать таблицу реакций на основе разных значений в зависимости от заголовка столбца, на который нажата кнопка. Пока что это мой код:
{ sortMethod: (a: ListItem, b: ListItem) =gt; { console.log(a, b); return 1; }, Header: (rest) =gt; { console.log(rest); return ( lt;Flex height={16} width="100%" justifyContent="center"gt; lt;Text onClick={() =gt; rest.column.sortMethod()} color="black"gt;Namelt;/Textgt; lt;/Flexgt; ); }, accessor: 'product.name', minWidth: 280, },
Это мой столик:
lt;Table key={`table.${products.length}.${selectedKeys.join('.')}`} isSelectable showPagination={showPagination} defaultPageSize={defaultPageSize} pageSizeOptions={pageSizes} onSelectionChange={(newSelectedProducts: ListItem[]) =gt; { if (tableProductsWithTags.length gt; 0) { setSelectedProducts(newSelectedProducts.filter(Boolean)); } }} noDataText={isLoading ? 'Loading ...' : 'No products'} columns={projectColumns} selectedKeys={selectedKeys} keyField="id" defaultSorted={sortingOptions} data={tableProductsWithTags} getTrProps={() =gt; { return { style: { alignItems: 'start' }, passthrought: { onClick: setFilterOption } }; }} getTdProps={ ((_state, _rowInfo, column: { id: string }) =gt; { const tdProps: { [key: string]: any } = { style: { minHeight: 55 } }; if (column.id === 'tags') { tdProps.passthrough = { onEdit: handleEditProduct }; } return tdProps; }) as ComponentPropsGetterRC } {...props} /gt;
Передача сортировки в sortMethod
опору кажется правильным способом, но как мне это реализовать на самом деле? В таблице вы можете видеть, что я передаю onEdit
метод, который обрабатывает редактирование ячейки. Я пробовал этот способ и для заголовка, но, похоже, у него нет доступа к тем же реквизитам.