Search
It’s easy to implement basic search functionality. The search functionality search through the table with a a wildcard-filter in each visible column.
Original
| SR. | NAME | GENDER | AGE | DATE | COUNTRY |
|---|---|---|---|---|---|
| 1 | Dett2 | Female | 36 | 16/08/2020 | Great Britain |
| 2 | Nern | Female | 19 | 15/10/2017 | France |
| 3 | Kallsie | Male | 20 | 16/08/2016 | France |
| 4 | Siuau | Female | 21 | 21/05/2015 | Great Britain |
| 5 | Shennice | Male | 22 | 21/05/2016 | France |
| 6 | Chasse | Female | 23 | 15/10/2018 | France |
| 7 | Tommye | Male | 24 | 16/08/2017 | United States |
| 8 | Dorcast | Female | 25 | 21/05/2016 | United States |
| 9 | Angelee | Male | 26 | 21/05/2017 | Great Britain |
| 10 | Willoom | Female | 26 | 15/10/2019 | France |
Startup visibility
When you implement search functionality a search input field, a search button, a reset button and the actual table are loaded:
[csvtohtml_create source_type="guess" source_files="free_testdata_10rows.csv" search_functionality="yes"]
| SR. | NAME | GENDER | AGE | DATE | COUNTRY |
|---|---|---|---|---|---|
| 1 | Dett2 | Female | 36 | 16/08/2020 | Great Britain |
| 2 | Nern | Female | 19 | 15/10/2017 | France |
| 3 | Kallsie | Male | 20 | 16/08/2016 | France |
| 4 | Siuau | Female | 21 | 21/05/2015 | Great Britain |
| 5 | Shennice | Male | 22 | 21/05/2016 | France |
| 6 | Chasse | Female | 23 | 15/10/2018 | France |
| 7 | Tommye | Male | 24 | 16/08/2017 | United States |
| 8 | Dorcast | Female | 25 | 21/05/2016 | United States |
| 9 | Angelee | Male | 26 | 21/05/2017 | Great Britain |
| 10 | Willoom | Female | 26 | 15/10/2019 | France |
If you don’t want to show the table as default, you may add hidetable_load=”yes”.
[csvtohtml_create source_type="guess" source_files="free_testdata_10rows.csv" search_functionality="yes" hidetable_load="yes"]
| SR. | NAME | GENDER | AGE | DATE | COUNTRY |
|---|---|---|---|---|---|
| 1 | Dett2 | Female | 36 | 16/08/2020 | Great Britain |
| 2 | Nern | Female | 19 | 15/10/2017 | France |
| 3 | Kallsie | Male | 20 | 16/08/2016 | France |
| 4 | Siuau | Female | 21 | 21/05/2015 | Great Britain |
| 5 | Shennice | Male | 22 | 21/05/2016 | France |
| 6 | Chasse | Female | 23 | 15/10/2018 | France |
| 7 | Tommye | Male | 24 | 16/08/2017 | United States |
| 8 | Dorcast | Female | 25 | 21/05/2016 | United States |
| 9 | Angelee | Male | 26 | 21/05/2017 | Great Britain |
| 10 | Willoom | Female | 26 | 15/10/2019 | France |
If you don’t want to show the table when you press reset-button, you may add hidetable_reset=”yes”.
[csvtohtml_create source_type="guess" source_files="free_testdata_10rows.csv" search_functionality="yes" hidetable_reset="yes" hidetable_load="yes"]
| SR. | NAME | GENDER | AGE | DATE | COUNTRY |
|---|---|---|---|---|---|
| 1 | Dett2 | Female | 36 | 16/08/2020 | Great Britain |
| 2 | Nern | Female | 19 | 15/10/2017 | France |
| 3 | Kallsie | Male | 20 | 16/08/2016 | France |
| 4 | Siuau | Female | 21 | 21/05/2015 | Great Britain |
| 5 | Shennice | Male | 22 | 21/05/2016 | France |
| 6 | Chasse | Female | 23 | 15/10/2018 | France |
| 7 | Tommye | Male | 24 | 16/08/2017 | United States |
| 8 | Dorcast | Female | 25 | 21/05/2016 | United States |
| 9 | Angelee | Male | 26 | 21/05/2017 | Great Britain |
| 10 | Willoom | Female | 26 | 15/10/2019 | France |