Skip to main content

Table

The Table component is a grid of data that can be filtered, searched. The Table component can have different parts, such as a header, a body, and a footer. The Table component can also have different features, such as checkboxes.

You can find the Tables in the src/views/Tables.jsx file.

Examples

Basic Table

Create a simple responsive table with bootstrap classes, html & custom modular scss. Table Preview

Result

NameEmailCityScore
Matthew McCormick[email protected]Vancouver93
Nancy Bo[email protected]Washington280
Frederiko Lopez[email protected]Barcelona16
Stanley Hummer[email protected]Manchester57
Lendley Wintz[email protected]Wien113
Barbara Noz[email protected]Brussels68
Matthew McCormick[email protected]Vancouver93
Nancy Bo[email protected]Washington280
Matthew McCormick[email protected]Vancouver93
Nancy Bo[email protected]Washington280

Variant Table Colorize table component maintains object data while providing

visual differentiation through color, enhancing data interpretation and user experience. Table Preview

Result

NameEmailCityScoreStatus
Matthew McCormick[email protected]Vancouver93
Nancy Bo[email protected]Washington280
Frederiko Lopez[email protected]Barcelona16
Stanley Hummer[email protected]Manchester57
Lendley Wintz[email protected]Wien113
Barbara Noz[email protected]Brussels68
Matthew McCormick[email protected]Vancouver93
Nancy Bo[email protected]Washington280
Matthew McCormick[email protected]Vancouver93
Nancy Bo[email protected]Washington280

Search & Pagination Search and Pagination dynamically updates table content,

ensuring efficient data retrieval and navigation for enhanced user interaction. Table Preview

Result

NameEmailCityScore
Matthew McCormick[email protected]Vancouver93
Nancy Bo[email protected]Washington280
Frederiko Lopez[email protected]Barcelona16
Stanley Hummer[email protected]Manchester57
Lendley Wintz[email protected]Wien113
Barbara Noz[email protected]Brussels68
Matthew McCormick[email protected]Vancouver93
Nancy Bo[email protected]Washington280
Matthew McCormick[email protected]Vancouver93
Nancy Bo[email protected]Washington280
Showing 1 to 10 entries

For more information of table please visit to react-bootstrap