Explore Templates

Data Tables

This is a our tailor-made hk-data-table based on react-bootstrap table.

Basic example

Add advanced interaction controls to Data tables like search, pagination etc. For responsive table just add the wrapperClasses="table-responsive" on <BootstrapTable />. View all options.

items
IDNamePositionOfficeStart DateSalary
xzlGJBJ5VpF_ND8jyPsXjSamantha RunolfsdottirAgentWallacefurt2025-03-17$64909
D9--jfshg-wYvXUAfeVy8Amos SmithamFacilitatorAlvahburgh2025-04-10$210720
rYfjSYKJz35Z6bbeVPxsIAnnie Kreiger PhDProducerWest Kaylin2024-10-02$104585
D87aZuGCWieszvgDmR7kGJaime ProhaskaArchitectChicago2025-01-22$65508
YBG7Znm5z8_aIoDedn0kKAngel ChamplinProducerPerris2025-03-18$234663
jutvLGDtE8iZ7AYxM1CxFJeremy Heathcote ISpecialistNoemifurt2025-02-16$269504
YS5wk20kkQcgwp6W7hZo1Cecil Hessel MDLiaisonNorth Eulalia2024-10-02$230503
7BbQp5yVZKiXHBFQlzItiKristina BechtelarDeveloperNew Clara2024-12-31$190971
OHlFCfH6Iu7VU_KGYwPgbJennifer Pouros VArchitectWest Winonaborough2024-12-08$67736
gtV7aFljfMdrsoHmhLqBYAllen JonesAdministratorWest Khalilhaven2025-05-04$235512
10 of 50
  • Previous
  • 1(current)
  • Next
Sorting

For column sorting on table, you can add sort:true in Column.

items
IDName Position Office Start Date Salary
xzlGJBJ5VpF_ND8jyPsXjSamantha RunolfsdottirAgentWallacefurt2025-03-17$64909
D9--jfshg-wYvXUAfeVy8Amos SmithamFacilitatorAlvahburgh2025-04-10$210720
rYfjSYKJz35Z6bbeVPxsIAnnie Kreiger PhDProducerWest Kaylin2024-10-02$104585
D87aZuGCWieszvgDmR7kGJaime ProhaskaArchitectChicago2025-01-22$65508
YBG7Znm5z8_aIoDedn0kKAngel ChamplinProducerPerris2025-03-18$234663
jutvLGDtE8iZ7AYxM1CxFJeremy Heathcote ISpecialistNoemifurt2025-02-16$269504
YS5wk20kkQcgwp6W7hZo1Cecil Hessel MDLiaisonNorth Eulalia2024-10-02$230503
7BbQp5yVZKiXHBFQlzItiKristina BechtelarDeveloperNew Clara2024-12-31$190971
OHlFCfH6Iu7VU_KGYwPgbJennifer Pouros VArchitectWest Winonaborough2024-12-08$67736
gtV7aFljfMdrsoHmhLqBYAllen JonesAdministratorWest Khalilhaven2025-05-04$235512
10 of 50
  • Previous
  • 1(current)
  • Next
Default Search

Add advanced interaction controls to Data tables like search, pagination etc. For responsive table just add the wrapperClasses="table-responsive" on <BootstrapTable />. View all options.

items
IDName Position Office Start Date Salary
xzlGJBJ5VpF_ND8jyPsXjSamantha RunolfsdottirAgentWallacefurt2025-03-17$64909
D9--jfshg-wYvXUAfeVy8Amos SmithamFacilitatorAlvahburgh2025-04-10$210720
rYfjSYKJz35Z6bbeVPxsIAnnie Kreiger PhDProducerWest Kaylin2024-10-02$104585
D87aZuGCWieszvgDmR7kGJaime ProhaskaArchitectChicago2025-01-22$65508
YBG7Znm5z8_aIoDedn0kKAngel ChamplinProducerPerris2025-03-18$234663
jutvLGDtE8iZ7AYxM1CxFJeremy Heathcote ISpecialistNoemifurt2025-02-16$269504
YS5wk20kkQcgwp6W7hZo1Cecil Hessel MDLiaisonNorth Eulalia2024-10-02$230503
7BbQp5yVZKiXHBFQlzItiKristina BechtelarDeveloperNew Clara2024-12-31$190971
OHlFCfH6Iu7VU_KGYwPgbJennifer Pouros VArchitectWest Winonaborough2024-12-08$67736
gtV7aFljfMdrsoHmhLqBYAllen JonesAdministratorWest Khalilhaven2025-05-04$235512
10 of 50
  • Previous
  • 1(current)
  • Next
Custom Search

Add advanced interaction controls to Data tables like search, pagination etc. For responsive table just add the wrapperClasses="table-responsive" on <BootstrapTable />. View all options.

IDName Position Office Start Date Salary
siEZUpXTRDQ7vpNYVEk45Marilyn SawaynLiaisonPort Jaclyn2025-04-04$120178
yu72_TMZUp5g7eWxv-8azAna CrooksManagerColestad2024-10-20$135746
p990mEO6FaXiU4iwUZb0BLeonard DeckowAssistantDelmerberg2025-04-30$49057
3gLzx8oZCccnhdBjriqrWRon CorkeryExecutiveNorth Christineboro2025-01-14$165876
DbGQYjxdEMil0VX7Fqfk2Lewis MitchellAdministratorNorth Jacynthetown2025-04-09$240787
TUBRhTGKLFDZ8wv2wlCNYWilson SchimmelEngineerBrianaberg2025-02-23$143282
3iH7JBo2EG262Aq24zSIdMrs. Christine CarterManagerWaldorf2024-09-20$156838
EqNADvvZzhqLCv0b0BFQ-Maryann QuitzonDirectorNew Alethaport2024-09-29$242308
ecvr_IAR5VXn4V00RlZmPGuy Hammes DVMOfficerNew Maymie2024-12-05$264342
hL1tDW_lvr_fypCY7hVZyStacy TurcotteOfficerMcKinney2025-04-19$236577
Checkbox select

You can add check-box selection on table by adding a rowSelection props on <HkDataTable />

items
IDName Position Office Start Date Salary
xzlGJBJ5VpF_ND8jyPsXjSamantha RunolfsdottirAgentWallacefurt2025-03-17$64909
D9--jfshg-wYvXUAfeVy8Amos SmithamFacilitatorAlvahburgh2025-04-10$210720
rYfjSYKJz35Z6bbeVPxsIAnnie Kreiger PhDProducerWest Kaylin2024-10-02$104585
D87aZuGCWieszvgDmR7kGJaime ProhaskaArchitectChicago2025-01-22$65508
YBG7Znm5z8_aIoDedn0kKAngel ChamplinProducerPerris2025-03-18$234663
jutvLGDtE8iZ7AYxM1CxFJeremy Heathcote ISpecialistNoemifurt2025-02-16$269504
YS5wk20kkQcgwp6W7hZo1Cecil Hessel MDLiaisonNorth Eulalia2024-10-02$230503
7BbQp5yVZKiXHBFQlzItiKristina BechtelarDeveloperNew Clara2024-12-31$190971
OHlFCfH6Iu7VU_KGYwPgbJennifer Pouros VArchitectWest Winonaborough2024-12-08$67736
gtV7aFljfMdrsoHmhLqBYAllen JonesAdministratorWest Khalilhaven2025-05-04$235512
10 of 50
  • Previous
  • 1(current)
  • Next
Export Table

You can export your table as a pdf, csv and excel by adding a exports props in <HkDataTable />.

csv
IDName Position Office Start Date Salary
XAHjGX5LBdR6EgTm1MxU9Georgia Sporer PhDDesignerBiankafurt2024-10-24$111706
9S3WcXzgeCFGfTS4vy486Angelica ParisianDeveloperGorczanycester2025-04-16$144633
P-fkTgNCvKzoI0MJ-oXwHYvette HaagEngineerPedrohaven2024-06-28$241270
iWs3HaLfiaH90V0FDwx-xBessie MannLiaisonWest New York2024-09-16$141521
sF6UUsVnWdHEOCN3ylv2bMr. Jose DachProducerFlaviostad2025-03-09$116424
-U6exRnPeOw3evdnFIAQDJuana TerryCoordinatorPort Meghan2025-02-05$187874
ZPM9xQRarXFxQTmz71gPcDixie Osinski IIDeveloperCasa Grande2024-08-20$202994
ZqGUho0YAtucKDXjnZUbHLaurie KrisSupervisorLombard2025-05-18$119911
TOapvsuP1pNFt3-Wd9ABbVelma GleichnerProducerWaelchiton2025-05-08$299503
72jrgqVFd6mKLEFUKiRH-Rose KochStrategistJarrodchester2024-10-30$251943