web-dev-qa-db-fra.com

Comment changer le CSS des colonnes - ReactTable

J'utilise react-table dans ma candidature.

Je suis coincé à faire une chose, c'est-à-dire changer le CSS de columns pendant le redimensionnement d'une colonne.

Actuellement, lorsque vous resize une colonne uniquement cursor change. Ce que je veux, c'est ajouter border au selected column.

J'ai également recherché ceci sur SO et google. Mais je n'ai rien trouvé d'utile. Et dans la documentation également, rien n'est mentionné à ce sujet.

Mise à jour

Maintenant, je peux ajouter une bordure tout en faisant glisser la colonne pendant le redimensionnement. Je peux le faire en ajoutant et en supprimant la classe.

Ce que j'ai fait pour le faire:

Créé un var dans l'état de className:

  this.state = {
         addBorder: null
   }

J'ai passé ce nom de classe dans ma colonne:

     const columns = [{
    Header: 'Name',
    accessor: 'name', // String-based value accessors!,
    headerClassName: this.state.addBorder,
    className: this.state.addBorder
}, {
    Header: 'Age',
    accessor: 'age',
    Cell: props => <span className='number'>{2}</span> // Custom cell components!
}, {
    id: 'friendName', // Required because our accessor is not a string
    Header: 'Friend Name',
    accessor: d => d.friend.name // Custom value accessors!
}, {
    Header: props => <span>Friend Age</span>, // Custom header components!
    accessor: 'friend.age'
}];

return (
    <div onMouseUp={this.handleMouseUp}>
    <ReactTable
        data={data}
        columns={columns} 
        resizable={true}
        onResizedChange={(col, e) => {
            const column = col[col.length-1];
            this.setState({addBorder: column.id})
        }} />
        </div>
)
}

Pour supprimer la classe lorsque le glissement se termine:

   handleMouseUp (e) {
    this.setState({addBorder: null});
}

Mais je ne suis toujours pas en mesure d'ajouter une bordure en survol.

Maintenant, j'envoie mon HTML personnalisé dans les accessoires d'en-tête. Et dans mon HTML, j'ai fait une div supplémentaire. Et j'ai déplacé ce div à droite. Et au survol de ce div, j'émets des événements de souris et change le CSS en conséquence.

Mais le div existant dans l'en-tête qui est responsable du redimensionnement de la colonne chevauche mon div.

  Header: props => <div className='header-div'> Name <div onMouseOver = {() => {
        console.log('mose');
        this.setState({className: 'addBorder'});
    }} className='hover-div' onMouseOut = {() => {console.log('sdasd');this.setState({className: null});}}> </div></div> ,
cssreactjsresizereact-table
9
Dalvik

D'après ce que je comprends, vous souhaitez ajouter une bordure lorsque vous survolez un en-tête de colonne. Si ma compréhension est correcte, vous pouvez utiliser :hover pseudo sélecteur sur la classe d'en-tête

.hdrCls:hover {
  border: 2px solid rgba(0,0,0,0.6) !important;
}

Mise à jour:

Vous pouvez manipuler l'état dans le gestionnaire onResizedChange exposé par react-table

onResizedChange={(newResized, event) => {
  let resizedCol = newResized.slice(-1)[0].id;
  if(this.state.activeCol !== resizedCol) {
    this.setState({
      activeCol: resizedCol,
      resizing: true
    })
  }
}}

Assurez-vous également que vous devez définir l'état resizing sur false lors de l'événement mouseup. Pour cela, j'ai trouvé la solution ci-dessous.

componentDidUpdate(props, state) {
  if (this.state.resizing && !state.resizing) {
    document.addEventListener('mouseup', this.onMouseUp);
  } else if (!this.state.resizing && state.resizing) {
    document.removeEventListener('mouseup', this.onMouseUp);
  }
}

onMouseUp = (evt) => {
  this.setState({
    activeCol: '',
    resizing: false
  });
  evt.stopPropagation();
  evt.preventDefault();
}

Pour référence:

const ReactTable = window.ReactTable.default

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      activeCol: '',
      resizing: false
    }
  }
  
  componentDidUpdate(props, state) {
    if (this.state.resizing && !state.resizing) {
      document.addEventListener('mouseup', this.onMouseUp);
    } else if (!this.state.resizing && state.resizing) {
      document.removeEventListener('mouseup', this.onMouseUp);
    }
  }
  
  onMouseUp = (evt) => {
    this.setState({
      activeCol: '',
      resizing: false
    });
    evt.stopPropagation();
    evt.preventDefault();
  }
  
  render() {
    const data = [{
      name:"Mark",
      age:24
    },
    {
      name:"Derek",
      age:26
    }]

    const columns = [{
          Header: 'Name',
          accessor: 'name', // String-based value accessors!,
          headerClassName: 'hdrCls',
          className: (this.state.activeCol === 'name') && this.state.resizing ? 'borderCellCls' : 'defaultCellCls'
      }, {
          Header: 'Age',
          accessor: 'age',
          headerClassName: 'hdrCls',
          className: (this.state.activeCol === 'age') && this.state.resizing ? 'borderCellCls' : 'defaultCellCls'
      }];

    return <ReactTable
      data = { data }
      columns = { columns }
      showPagination= {false}
      onResizedChange={(newResized, event) => {
        let resizedCol = newResized.slice(-1)[0].id;
        if(this.state.activeCol !== resizedCol) {
          this.setState({
            activeCol: resizedCol,
            resizing: true
          })
        }
      }}
    />
  }
}

ReactDOM.render( < App / > , document.getElementById("app"))
.hdrCls:hover {
  border: 2px solid rgba(0,0,0,0.6) !important;
}


.borderCellCls {
  border-right: 2px solid rgba(0,0,0,0.6) !important;
  border-left: 2px solid rgba(0,0,0,0.6) !important;
}

.defaultCellCls {
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-table/6.7.6/react-table.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/react-table/6.7.6/react-table.css"></link>
<div id="app"></div>

Vous pouvez jouer avec CSS. J'espère que c'est ce que vous voulez et j'espère que cela vous aidera.

Mise à jour:

Je pense que vous devez jouer avec CSS pour réaliser ce que vous désirez.

.borderCellCls {
   border-right: 2px solid rgba(0,0,0,0.6) !important;
   border-left: 2px solid rgba(0,0,0,0.6) !important;
}
5
Dev