reactjs - helmet - react meta tags

Seleccione la fila en la tabla de reacción de clic

Question

Estoy intentando encontrar la mejor tabla para usar con mis aplicaciones de reacción y, por ahora, la react-table 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 examples que muestren esto.

Algunas cosas, que he intentado incluyen tratar de establecer un ClassName en el clic de la fila. Pero parece que no puedo encontrar el elemento llamante en e ni t . Además, no me gusta este enfoque, porque no es así como 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: {
                    }
                }
            }}
        />

Algunas posibles soluciones serían representar casillas de verificación como 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 he descrito anteriormente?

¡Gracias!

EDITAR: Otra opción, que es de código abierto, es sugerir una edición. Y tal vez esto es lo correcto a hacer.

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"

Answer 1

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) => {
        that.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 }

Answer 2

La respuesta que seleccionó es correcta, sin embargo, si está utilizando una tabla de clasificación, se bloqueará, ya que rowInfo se volverá indefinido a medida que realiza la búsqueda, le recomendaría usar esta función.

                getTrGroupProps={(state, rowInfo, column, instance) => {
                    if (rowInfo !== undefined) {
                        return {
                            onClick: (e, handleOriginal) => {
                              console.log(''It was in this row:'', rowInfo)
                              this.setState({
                                  firstNameState: rowInfo.row.firstName,
                                  lastNameState: rowInfo.row.lastName,
                                  selectedIndex: rowInfo.original.id
                              })
                            },
                            style: {
                                cursor: ''pointer'',
                                background: rowInfo.original.id === this.state.selectedIndex ? ''#00afec'' : ''white'',
                                color: rowInfo.original.id === this.state.selectedIndex ? ''white'' : ''black''
                            }
                        }
                    }}
                }

Answer 3

No estoy familiarizado con react-table, por lo que no sé si tiene soporte directo para seleccionar y deseleccionar (sería bueno si lo hubiera).

Si no lo hace, con el fragmento de código que ya tiene puede instalar el controlador onCLick. Ahora, en lugar de tratar de adjuntar el estilo directamente a la fila, puede modificar el estado, por ejemplo, agregando select: true a los datos de la fila. Eso desencadenaría la devolución. Ahora solo tiene que invalidar cómo se representan las filas con === verdadero procesado. Algo a lo largo de 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''
      }
    }
  }}
/>

Answer 4

Otro mecanismo para el estilo dinámico es definirlo en el JSX para su componente. Por ejemplo, lo siguiente podría usarse para diseñar de manera selectiva el paso actual en el tutorial React tic-tac-toe (una de las mejoras de crédito adicionales sugeridas:

  return (
    <li key={move}>
      <button style={{fontWeight:(move === this.state.stepNumber ? ''bold'' : '''')}} onClick={() => this.jumpTo(move)}>{desc}</button>
    </li>
  );

Por supuesto, un enfoque más limpio sería agregar / eliminar una clase CSS ''seleccionada'', pero este enfoque directo podría ser útil en algunos casos.

Answer 5

Se incluye un HOC 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 lea primero 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}
/>

Vea aquí para más información:
https://github.com/react-tools/react-table/tree/master/src/hoc#selecttable

Aquí hay un ejemplo de trabajo:
https://react-table.js.org/#/story/select-table-hoc

Answer 6

Si quieres tener selección múltiple en la fila seleccionada ...

import React from ''react'';
import ReactTable from ''react-table'';
import ''react-table/react-table.css'';
import { ReactTableDefaults } from ''react-table'';
import matchSorter from ''match-sorter'';


class ThreatReportTable extends React.Component{

constructor(props){
  super(props);

  this.state = {
    selected: [],
    row: []
  }
}
render(){

  const columns = this.props.label;

  const data = this.props.data;

  Object.assign(ReactTableDefaults, {
    defaultPageSize: 10,
    pageText: false,
    previousText: ''<'',
    nextText: ''>'',
    showPageJump: false,
    showPagination: true,
    defaultSortMethod: (a, b, desc) => {
    return b - a;
  },


  })

    return(
    <ReactTable className=''threatReportTable''
        data= {data}
        columns={columns}
        getTrProps={(state, rowInfo, column) => {


        return {
          onClick: (e) => {


            var a = this.state.selected.indexOf(rowInfo.index);


            if (a == -1) {
              // this.setState({selected: array.concat(this.state.selected, [rowInfo.index])});
              this.setState({selected: [...this.state.selected, rowInfo.index]});
              // Pass props to the React component

            }

            var array = this.state.selected;

            if(a != -1){
              array.splice(a, 1);
              this.setState({selected: array});


            }
          },
          // #393740 - Lighter, selected row
          // #302f36 - Darker, not selected row
          style: {background: this.state.selected.indexOf(rowInfo.index) != -1 ? ''#393740'': ''#302f36''},


        }


        }}
        noDataText = "No available threats"
        />

    )
}
}


  export default ThreatReportTable;