Wie style ich das Eingabefeld für das Eingabefeld für den Filter?

Question

Ich verwende react-table und haben eine Filtermethode für jede Spalte, die funktioniert. Allerdings kann ich nicht herausfinden, wie ich das Filtereingabefeld tatsächlich style - es ist jetzt weiß und fügt sich in den Hintergrund.

Hier ist ein codepen, wo die „Last Name“ Spalte filterbar ist, mit einem Eingabefeld: https://codepen.io/anon/pen/QgOdOp?editors=0010

Ich möchte einige semantische Styling zu diesem Eingabefeld hinzuzufügen, wie folgt aus:

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

Aber ich weiß nicht, wie man den Eingabewert an die Spalte selbst bindet.

Ich habe folgend in der bestimmten Spalte versucht, aber es hat nichts machen:

{ 
    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> 
    ) 
    } 

Answer 1

Die mit einfachen CSS erreicht werden könnte. Geben Sie der Tabelle eine id oder class, dann zielen Sie auf die Eingänge und stylen Sie sie nach Bedarf.

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

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

Die bessere Option wäre react-table s verwenden integrierte in Filter Spalt Option eine benutzerdefinierte UI für die Filter zu definieren. Dies ist in der Custom Filtering example dokumentiert. Dadurch können Sie ein Objekt style übergeben.

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 können Sie ein Hintergrundbild definieren, um das gewünschte Symbol zu erreichen. Oder Sie könnten eine benutzerdefinierte Komponente übergeben, die ein Symbolelement hinter der Eingabe setzt. So etwas wie das:

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> 
) 
);