0
755
ViewsSeleccione la fila al hacer clic en la tabla de reacción
Estoy tratando de encontrar la mejor tabla para usar con mis aplicaciones de reacción y, por ahora, la tabla de reacción ofrece todo lo que necesito (paginación, control del lado del servidor, filtrado, clasificación, fila de pie de página).
Dicho esto, parece que no puedo seleccionar una fila. No hay ejemplos que lo demuestren.
Algunas cosas que he intentado incluyen intentar establecer un nombre de clase al hacer clic en la fila. Pero parece que no puedo encontrar el elemento de llamada en e t . Además, no me gusta este enfoque, porque no es cómo una aplicación de reacción debería hacer las cosas.
<ReactTable ... getTrProps={(state, rowInfo, column, instance) => { return { onClick: (e, t) => { t.srcElement.classList.add('active') }, style: { } } }} />Una posible solución sería mostrar casillas de verificación como una primera columna, pero esto no es óptimo ya que limita el área para hacer clic para "activar" la fila. Además, la retroalimentación visual será menos expresiva.
¿Me estoy perdiendo el elefante en la habitación? Y si no, ¿conoce otra biblioteca que admita las cosas que describí anteriormente?
¡Gracias!
EDITAR: Otra opción, al ser de código abierto, es sugerir una edición. Y tal vez esto sea lo correcto.
EDITAR 2
Otra cosa, sugerida por Davorin Ruševljan en los comentarios, pero no pude hacer que funcionara fue:
onRowClick(e, t, rowInfo) { this.setState((oldState) => { let data = oldState.data.slice(); let copy = Object.assign({}, data[rowInfo.index]); copy.selected = true; copy.FirstName = "selected"; data[rowInfo.index] = copy; return { data: data, } }) } .... getTrProps={(state, rowInfo, column) => { return { onClick: (e, t) => { this.onRowClick(e, t, rowInfo) }, style: { background: rowInfo && rowInfo.row.selected ? 'green' : 'red' } } }}Esto establece la columna 'Nombre' en 'seleccionado', pero no establece la clase en 'verde'
3 answers
Answer question0
Encontré la solución después de algunos intentos, espero que esto pueda ayudarte. Agregue lo siguiente a su componente <ReactTable> :
getTrProps={(state, rowInfo) => { if (rowInfo && rowInfo.row) { return { onClick: (e) => { this.setState({ selected: rowInfo.index }) }, style: { background: rowInfo.index === this.state.selected ? '#00afec' : 'white', color: rowInfo.index === this.state.selected ? 'white' : 'black' } } }else{ return {} } } En su state , no olvide agregar un valor selected nulo, como:
state = { selected: null }0
Hay un HOC incluido para React-Table que permite la selección, incluso al filtrar y paginar la tabla, la configuración es un poco más avanzada que la tabla básica, así que primero lea la información en el enlace a continuación.
Después de importar el HOC, puede usarlo así con los métodos necesarios:
/** * Toggle a single checkbox for select table */ toggleSelection(key: number, shift: string, row: string) { // start off with the existing state let selection = [...this.state.selection]; const keyIndex = selection.indexOf(key); // check to see if the key exists if (keyIndex >= 0) { // it does exist so we will remove it using destructing selection = [ ...selection.slice(0, keyIndex), ...selection.slice(keyIndex + 1) ]; } else { // it does not exist so add it selection.push(key); } // update the state this.setState({ selection }); } /** * Toggle all checkboxes for select table */ toggleAll() { const selectAll = !this.state.selectAll; const selection = []; if (selectAll) { // we need to get at the internals of ReactTable const wrappedInstance = this.checkboxTable.getWrappedInstance(); // the 'sortedData' property contains the currently accessible records based on the filter and sort const currentRecords = wrappedInstance.getResolvedState().sortedData; // we just push all the IDs onto the selection array currentRecords.forEach(item => { selection.push(item._original._id); }); } this.setState({ selectAll, selection }); } /** * Whether or not a row is selected for select table */ isSelected(key: number) { return this.state.selection.includes(key); } <CheckboxTable ref={r => (this.checkboxTable = r)} toggleSelection={this.toggleSelection} selectAll={this.state.selectAll} toggleAll={this.toggleAll} selectType="checkbox" isSelected={this.isSelected} data={data} columns={columns} /> Ver aquí para más información:
https://github.com/tannerlinsley/react-table/tree/v6#selecttable
Aquí hay un ejemplo de trabajo:
https://codesandbox.io/s/react-table-select-j9jvw
0
No estoy familiarizado con la tabla de reacciones, por lo que no sé si tiene soporte directo para seleccionar y anular la selección (sería bueno si lo tuviera).
Si no es así, con el código que ya tiene puede instalar el controlador onCLick. Ahora, en lugar de intentar adjuntar el estilo directamente a la fila, puede modificar el estado, por ejemplo, agregando seleccionado: verdadero a los datos de la fila. Eso activaría el renderizado. Ahora solo tiene que anular cómo se representan las filas con === verdadero seleccionado. Algo a lo largo de las líneas de:
// Any Tr element will be green if its (row.age > 20) <ReactTable getTrProps={(state, rowInfo, column) => { return { style: { background: rowInfo.row.selected ? 'green' : 'red' } } }} />