how can i add select, checkbox, radio buttons, and input filters on datatable columns????
how can I add select, checkbox, radio buttons, and input filters on datatable columns????
hi there,
I want to add select, checkbox, radio buttons, and input filters on datatable columns, please let me know how I can achieve this.
I want to add
- radio filter on the "gender" column.
- checkbox filter on the "user type" column (admin, editor, writer, reviewer, etc)
- select filter on the "status" column (predefined statuses (published, draft, private, etc)
- input filter on the "age" column (please also share how I can add the "number" input filed and "text" input field.
Thanks, waiting for your reply.
Replies (2)
Yes, this can be done using DataTables’ column().search() API. You can add a text/number input for Age, a select for Status, and custom checkbox/radio controls for User Type and Gender, then trigger the column search on change.
For the select filter, DataTables already has an official example showing this approach, so you can use that as a starting point and adapt the same pattern for checkboxes and radio buttons.
Hi,
At the moment we do not have such an example but we will definitely consider adding it in a future update. In the meantime you can refer to the Datatable API examples on how to add inputs in data table columns.
Regards.
ReUI
Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.
