Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom Input Component #4

Open
Nighthawk22 opened this issue Feb 1, 2017 · 5 comments
Open

Custom Input Component #4

Nighthawk22 opened this issue Feb 1, 2017 · 5 comments

Comments

@Nighthawk22
Copy link

Hi,

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

Thanks
Nighthawk

@bebraw
Copy link
Member

bebraw commented Feb 1, 2017

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
Copy link
Author

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
Copy link
Member

bebraw commented May 3, 2017

Did you figure this out?

@Nighthawk22
Copy link
Author

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
Copy link
Member

bebraw commented May 4, 2017

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants