reactabular / searchtabular

Search utilities (MIT)
MIT License
5 stars 17 forks source link

Custom Input Component #4

Open Nighthawk22 opened 7 years ago

Nighthawk22 commented 7 years ago

Hi,

Is it possible to add a custom component for filter inputs? I would need a checkbox for TrueFalse values.

Thanks Nighthawk

bebraw commented 7 years ago

I think you may need to expand the SearchColumns component to fit your exact needs.

I can accept a PR if we can agree on an API. Basically we would need some nice way to map column information to custom elements to pull this off as it defaults to input right now.

Nighthawk22 commented 7 years ago

Thanks for the fast response. I will come back to this issue in the next two weeks and then we can discuss the API.

bebraw commented 7 years ago

Did you figure this out?

Nighthawk22 commented 7 years ago

We actually made a custom implementation of your SearchColumns.

return (
        <tr>
            {columns.map((column, i) => (
                <th key={`${column.property || i}-column-filter`} className="column-filter">
                    {column && column.property ?
                        (column.type && column.type === 'boolean' ?
                            <select name={column.property} value={query[column.property] || ''} onChange={onQueryChange}>
                                <option value="">...</option>
                                <option value="true">✔︎</option>
                                <option value="false">✖</option>
                            </select>
                            :
                            <input
                                onChange={onQueryChange}
                                className="column-filter-input"
                                name={column.property}
                                placeholder={column.filterPlaceholder || ''}
                                value={query[column.property] || ''}
                              />)
                    : ''}
                </th>
            ))}
        </tr>
    );
bebraw commented 7 years ago

@Nighthawk22 Cool to hear. It might be nice to refactor the package component so that it's flexible enough for injecting that select. PR welcome.