Wie kann ich Stil reagieren-Tabelle filter, input-Feld?

Ich bin mit react-table und haben eine filter-Methode für jede Spalte, die funktioniert. Aber ich kann nicht scheinen, um herauszufinden, wie ich eigentlich den Stil von filter-input-Feld - es ist nun weiß und verschmilzt mit dem hintergrund.

Hier ein codepen, wo die "Last Name" Spalte ist sortierbar, mit einem input-Feld: https://codepen.io/anon/pen/QgOdOp?editors=0010

Möchte ich hinzufügen, dass einige semantische styling auf dieses Eingabefeld, wie diese:

                    <div className="ui icon input">
                        //Input values would go here
                        <i className="search icon" />
                    </div>

Aber ich nicht zu wissen scheinen, wie das binden der input-Wert für die Spalte selbst.

Ich habe versucht Folgendes in die jeweilige Spalte ist, aber es nicht etwas Rendern:

{
    Header: 'Last Name',
    filterable: true,
    id: 'lastName',
    accessor: d => d.lastName
    Filter: Cellinfo => (
                <div className="ui icon input">
                     <select onChange={event => onFiltersChange(event.target.value)} value={filter ? filter.value : ''}></select> 
                    <i className="search icon" />
                </div>
    )
  }
  • Ist diese 2 Fragen - wie Stil die Eingabe? und wie binden Sie den input-Wert an die Spalte?
  • Vor allem, wie tun Sie tatsächlich anzuwenden das styling. Der andere Teil werde ich herausfinden, aus der docs nehme ich an 🙂
  • Sind Sie versuchen, ein Symbol hinzufügen, um das Eingabefeld? Oder welche Art von styling Sie wollen?
  • Ja, ich habe einige css von semantic-ui, die ich anwenden möchten, in das Eingabefeld, und ein Teil davon ist das hinzufügen ein Symbol "suchen" in der Tat 🙂
  • Hat die demo enthält den Eingang in die Last Name Spalte?
  • Ich bin sehr traurig, meine änderungen wurden nicht gespeichert. Es sollte aktualisiert werden, jetzt mit einem filter-Eingang.
  • Ein bisschen nach unten die Beispiele, die hier sind, tun Sie eine benutzerdefinierte Filterung dieser Art und Weise.. Aber ich weiß noch nicht so Recht, wie Sie es anwenden. react-table.js.org/#/story/custom-filtering

InformationsquelleAutor cbll | 2017-06-27
  1. 8

    Dies könnte erreicht werden mit reinem CSS. Geben Sie der Tabelle eine id oder class, dann Ziel die Eingänge und Stil Sie Sie bei Bedarf. 

    <ReactTable 
  showFilters={true} 
  data={makeData()} 
  columns={columns} 
  className='react-table' 
/>

.react-table input {
  background-color: black;
  color: white;
}

    Die bessere option wäre, die Nutzung react-tables built-in Filter Spalte option, um eine benutzerdefinierte Benutzeroberfläche für den filter. Dies ist dokumentiert in der Benutzerdefinierte Filtern Beispiel. Dies ermöglicht die übergabe eines style Objekt.

    const columns = [
  {
    Header: 'Name',
    columns: [
      {
        Header: 'First Name',
        accessor: 'firstName',
      },
      {
        Header: 'Last Name',
        filterable: true,
        id: 'lastName',
        accessor: d => d.lastName,
        Filter: ({filter, onChange}) => (
          <input
            onChange={event => onChange(event.target.value)}
            value={filter ? filter.value : ''}
            style={{
              width: '100%',
              backgroundColor: 'gray',
              color: 'white',
            }}
          />
        ),
      },
    ],
  },
  {
    Header: 'Info',
    columns: [
      {
        Header: 'Age',
        accessor: 'age',
      },
    ],
  },
];

    Mit diesem definieren Sie ein Hintergrundbild zu erreichen, das Symbol, das Sie wollen. Oder Sie können eine benutzerdefinierte Komponente, die legt ein icon-element hinter dem Eingang. So etwas wie dieses:

    Filter: ({filter, onChange}) => {
  return (
        <div style={{position: 'relative'}}>
        <input
          onChange={event => onChange(event.target.value)}
          value={filter ? filter.value : ''}
          style={{
            width: '100%',
            backgroundColor: 'transparent',
            color: '#222222',
          }}
        />
        <i style={{position: 'absolute', right: '10px', lineHeight: '30px'}}>
          Icon
        </i>
      </div>
  )
);
    • Ich habe versucht, die Umsetzung Ihres zweiten Beispiel, das hinzufügen einer style-Eigenschaft(ziemlich kopieren-einfügen des gesamten Filters in meiner aktuellen Spalte). Nichts ändert sich an alle, die es nicht auf die styling?
    • Warten - es funktioniert in der codepen, aber nicht mein eigenes Beispiel. Etwas zweifelhaft... Das muss das Problem sein-alle zusammen. Vielen Dank für deine Hilfe.. es heraus zu Überprüfen. Es ist wirklich komisch, ich kann den Stil den Zeilen, aber anscheinend ist der filter für Spalte nimmt es gar nicht.
    • Nicht immer nur copy/paste ohne zu schauen über den code. Viele Beispiel auf Stackoverflow enthalten psuedocode und Tippfehler, die durch Menschen, die versuchen, Fragen schnell zu beantworten. Sie waren in der Lage, um es arbeiten?
    • Es ist nur styling, obwohl. Und Nein, die Tabelle gibt keine Fehler oder Warnungen angezeigt, und die filter-Eingänge sind vorhanden(und funktionieren), aber der Stil ist einfach nicht angewendet, irgendwie.
    • Ich sehe das styling Sie angewendet in Ihrem Codepen. Redest du über ein lokales bauen?
    • Ja, meine lokale bauen, aber es unterscheidet sich nicht in Bezug auf die Spalte Komplexität als die codepen, so bin ich ein wenig verwirrt - vielleicht .css vom reagieren-Tabelle überschreiben ist alles?
    • Versuchen Sie, einen anderen ändern zu dem Eingang, wie ein className um sicherzustellen, dass Ihr build funktioniert.
    • Ändern kann ich die Sachen überschreiben .rt-thead -. -Filter in meiner eigenen css - das ist seltsam.. Und Nein, das hinzufügen von Klassennamen oder das hinzufügen der <i> mit einem Symbol einfach nicht tun
    • Sind Sie sicher, dass Ihre build-Skript ausgeführt wird? Klingt wie Ihre js ist nicht der Wiederaufbau, wenn das hinzufügen des Filter option nicht funktioniert.
    • Ich bin 100% sicher. Läuft webpack im watch-Modus, und es baut auf jede Veränderung. Das ist nicht das Problem. Wie ich schrieb, ich kann es überschreiben die css aus dem reagieren-Tabelle.css, aber irgendwie ist dieser Stil hinzufügen Eigentum tut nichts

    InformationsquelleAutor Brett DeWoody
Schreibe einen Kommentar