web-dev-qa-db-ja.com

反応テーブルフィルター入力フィールドのスタイルを設定するにはどうすればよいですか？

私はreact-tableを使用しており、機能する各列のフィルターメソッドがあります。ただし、実際にフィルター入力フィールドのスタイルを設定する方法がわからないようです。現在は白で、背景に溶け込んでいます。

これは、「姓」列がフィルター可能で、入力フィールドがあるコードペンです。 https://codepen.io/anon/pen/QgOdOp?editors=001

この入力フィールドに、次のようなセマンティックスタイルを追加したいと思います。

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

しかし、入力値を列自体にバインドする方法がわからないようです。

特定の列で次のことを試しましたが、何もレンダリングされません。

{
    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>
    )
  }
reactjsinput-filter
6
cbll

これはプレーンCSSで実現できます。テーブルにidまたはclassを指定し、入力をターゲットにして、必要に応じてスタイルを設定します。

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

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

より適切なオプションは、react-tablesの組み込みのFilter列オプションを使用して、フィルターのカスタムUIを定義することです。これは カスタムフィルタリングの例 に記載されています。これにより、styleオブジェクトを渡すことができます。

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',
      },
    ],
  },
];

これを使用して、必要なアイコンを実現するための背景画像を定義できます。または、入力の背後にアイコン要素を設定するカスタムコンポーネントを渡すこともできます。このようなもの：

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>
  )
);
8
Brett DeWoody