Introduction

Welcome to the documentation for react-bootstrap-data-grid!

react-bootstrap-data-grid is a project that provides grid and table UI components that work specifically with apps built with React and choosing to use Bootstrap as the design system.

It is designed to make use of Bootstrap design tokens have the same look and feel as the rest of a site styled with Bootstrap.

To get started, follow the installation instructions to install react-bootstrap-data-grid into your project. Once installed, go to the basic usage add your first tablle or grid into your project. From there, look through the documentation to explore additional features.

What is a Data Grid?

Web applications often involve displaying data in a tabular format and allowing the user to manipulate perform CRUD (Create, Read, Update, Delete) operations on the data.

It is also common to allow the user to sort, filter, and paginate data displayed this way.

These kinds of features take a significant time to implement from scratch. A data grid is a UI component that partially or fully implements many of these features in order to speed up development web applications.

Over time, popular data grid components have come to adopt particularly advanced features. For example:

Row virtualization
Unmounting rows that are out of view to conserve memory
Row and column reordering
Allowing the user to drag an drop rows and columns to change the displayed order
Column resizing
Allowing the user to change the width of a column by dragging a border
Lazy loading
Deferring loading of data from a server until the user scrolls that data into view

Comparison with Other Solutions

react-bootstrap-table2

react-bootstrap-table2 was previously popular table component for Bootstrap. It is one of the projects by which react-bootstrap-data-grid was inspired.

Unfortunately, the project has not seen a release since 2018 and only supports React 7 and Bootstrap 4.

react-bootstrap-data-grid aims to fill the niche that react-bootstrap-table2 left behind.

MUI-X Data Grid

MUI-X Data Grid is the official data grid component for the Material UI design system. It is the other project by which react-bootstrap-data-grid was inspired.

react-bootstrap-data-grid aims to fill the same role as MUI-X Data Grid, but for Bootstrap rather than the Material UI design system.

Tanstack Table

Tanstack Table is a popular headless data grid solution. Being a headless solution, it provides functionality for manipulating data internally. The headless nature allows it integrates with any design system but leaves the developer to implement the actual UI.

In contrast, react-bootstrap-data-grid is for developers who have decided on using specifically Bootstrap and React for their web app and wishes to avoid the effort of implementing the UI portions of the data grid component.

AG Grid

AG Grid is perhaps the most popular data grid solution on the market. However, it has its own design system.

Customizing AG Grid to make use of Bootstrap design tokens to achieve some degree of the same look and feel as Bootstrap components is likely possible, but may be a significant effort.

react-bootstrap-data-grid is for those who want a data grid solution that looks aesthetically as similar as possible to the rest of a site styled with Bootstrap and without going through such a customization effort.

Editions

There are two editions of react-bootstrap-data-grid, Community and Pro. The Community edition is released under the MIT license and is freely usable and distributable.

The Pro edition contains advanced features not available in the Community edition and requires a commercial license to use in production. There is no license available for purchase yet, but it is expected to be made available in the near future.

The getting started instructions in this article apply to the Community edition. For information on to install and set up the Pro edition, see the relevant article. Throughout this documentation site, articles with content that only pertain to the Pro edition will be marked with the following badge: Pro.

Further information

Live Demo

The following is a live demo of the grid component that is a part of react-bootstrap-data-grid.

Name
Subtitle
Description
Category
Cost
HP
Speed (m/s)
Attack
Splash Range (m)
Attack Interval (s)
Range (m)
Targeting
Unlock Cost
Upgrade Exp
Rotation Speed (degrees/s)
Abyss
Flying Titan
Abyss is an 800-cost aerial titan unit that attacks by sweeping a high-damage laser across the battlefield.
air
800
66955
10
3859
0
4
100
AIR & GROUND
350
4800
60
Arclight
Medium Anti-Swarm Bot
Arclight is a 100-cost medium-ranged chaff clear unit that excels against light units like crawlers, fangs, and mustangs.
ground
100
4813
7
365
7
0.9
95
GROUND
0
750
80
Crawler
Light Melee Robot
Crawler is a 100-cost high-speed melee light unit featuring the most bodies per squad in the game.
ground
100
263
16
79
0
0.6
6
GROUND
0
450
120
Death Knell
High Damage Titan
Death Knell is an 800-cost ranged titan unit that shoots up to 4 beams with ramping damage, one in each direction.
ground
800
125512
6
207
3
0.2
115
AIR & GROUND
350
3200
60
Fang
Light All-Purpose Bot
Fang is a flexible 100-cost Ranged light unit that can serve as either chaff or Ranged DPS depending on its technologies.
ground
100
117
6
63
0
1.5
75
AIR & GROUND
0
600
120
Farseer
Large support vehicle
Farseer is a fast-moving 300-cost long-ranged unit with plenty of anti-air and supportive capabilities.
ground
300
11991
16
1348
8
2
125
AIR & GROUND
50
1800
60
Fire Badger
Medium Anti-Swarm Tank
Fire Badger is a short-ranged 200-cost medium chaff clear unit with many ways to spread fire.
ground
200
4222
9
27
7
0.1
75
GROUND
0
1400
80
Fortress
Giant Guard Robot
Fortress is a ranged 400-cost giant unit that can protect its team while dealing high damage to ground units.
ground
400
43938
6
6524
5
1.8
100
GROUND
200
1600
50
Hacker
Hacker Bot
Hacker is a 200-cost long-ranged unit that takes control of enemy units instead of dealing damage.
ground
200
3249
8
615
0
0.3
110
GROUND
100
560
50
Hound
Light Anti-Swarm Mech
Hound is a 100-cost short-ranged light unit that specializes in killing other light units, while still functioning as a weak form of chaff or a source of utility.
ground
100
879
10
246
6
2.4
70
GROUND
0
750
120
Marksman
Long-Range Anti-Unit Bot
Marksman is a 100-cost long-ranged DPS unit that excels at sniping single targets from afar.
ground
100
1622
8
2329
0
3.1
140
AIR & GROUND
0
650
70
Melting Point
Giant Anti-Unit Bot
Melting Point is a 400-cost giant unit that ramps up damage as it attacks, making it ideal against other giant and high-hp units.
ground
400
30907
6
168
3
0.2
115
AIR & GROUND
200
1400
60
Mountain
Titan
Mountain is an 800-cost ranged titan unit that provides unmatched DPS combined with monstrous HP.
ground
800
136657
6
5899
5
2
100
GROUND
350
3200
50
Mustang
High-Speed All-Purpose Tank
Mustang is a 200-cost light unit with a fast attack that helps in both chaff clear and DPS.
ground
200
343
16
36
0
0.4
95
AIR & GROUND
0
1200
120
Overlord
Giant Aircraft
Overlord is a 500-cost long-ranged aerial giant unit that shoots a volley of missiles with overwhelming single-target damage and a small splash radius.
air
500
20323
10
4474
7
4.6
120
AIR & GROUND
200
1750
20
Phantom Ray
Medium-sized Aircraft
Phantom Ray is a 200-cost short-ranged medium air unit with high DPS and cloaking technology.
air
200
3412
16
1087
3
3
65
AIR & GROUND
50
1000
100
Phoenix
Long-Range Strike Aircraft
Phoenix is a 200-cost long-ranged aerial unit that excels at sniping single targets from afar.
air
200
1491
16
3058
0
3.4
120
AIR & GROUND
50
1300
80
Raiden
Giant Aircraft
Raiden is a 400-cost aerial giant unit whose weapon always attacks up to 3 different targets.
air
400
16065
10
5027
0
4.6
110
AIR & GROUND
200
2400
60
Rhino
Heavy Melee Bot
Rhino is a 200-cost melee tank unit that can deal massive damage if it reaches its victims
ground
200
19297
16
3560
6
0.9
6
GROUND
50
1150
100
Sabertooth
Heavy Tank
Sabertooth is a high-damage 200-cost tank that excels at deleting any unit its cannons target.
ground
200
14886
8
6881
5
3.2
95
GROUND
0
1300
60
Sandworm
Giant Melee Mech
Sandworm is a melee 400-cost giant unit that burrows underground to avoid damage while moving toward its prey.
ground
400
48645
16
9352
12
2.5
60
GROUND
200
2000
90
Scorpion
Heavy Anti-Swarm Robot
Scorpion is a tanky 300-cost DPS unit with a very low firing rate that hits a huge area, capable of taking out an entire pack of medium units in one shot.
ground
300
18632
7
10650
15
4.5
100
GROUND
50
1500
80
Sledgehammer
Heavy Tank
Sledgehammer is a 200-cost medium unit that is difficult to kill while providing a small amount of splash damage.
ground
200
3478
7
608
5
4.5
95
GROUND
0
1300
50
Steel Ball
High-Speed Anti-Unit Bot
Steel ball is a fast, short-ranged 200-cost medium unit that can kill any ground target it attacks, provided it survives for a few seconds.
ground
200
4571
16
55
0
0.2
45
GROUND
0
1000
120
Stormcaller
Heavy Rocket Launcher
Stormcaller is a fragile, super-long-ranged 200-cost artillery unit that excels against any slow-moving enemy from afar, but cannot defend itself in close range.
ground
200
1149
6
772
5.5
6.6
180
GROUND
50
1100
50
Tarantula
Heavy Mech
Tarantula is a 200-cost short-ranged tank that serves as an early-game chaff clear unit and scales well with heavy investment.
ground
200
14773
8
496
5
0.6
80
GROUND
0
1500
80
Typhoon
Heavy All-Purpose Mech
Typhoon is a 300-cost tanky ranged chaff clear unit that is strong against light units both on the ground and in the sky.
ground
300
9529
9
88
5
0.2
100
AIR & GROUND
50
1950
120
Void Eye
Light High Damage Unit
Void eye is a 100-cost medium-ranged DPS unit whose role can change with a number of inexpensive transformative techs.
ground
100
1522
8
995
0
3.3
100
GROUND
0
650
120
Vortex
Medium Mech
Vortex is a 100-cost frontliner that specializes in killing medium units at mid-range.
ground
100
7425
8
1309
0
1.5
85
GROUND
0
750
80
Vulcan
Giant Anti-Swarm Bot
Vulcan is a 400-cost giant unit that excels at clearing chaff and spreading fire from a medium-to-long range.
ground
400
32559
6
75
15
0.1
95
GROUND
200
2200
70
War Factory
Titan Mobile Factory
War Factory is an 800-cost ranged titan unit with four independent high-power cannons that can research the ability to produce a variety of units during combat.
ground
800
113593
6
7520
4.5
1.8
100
GROUND
350
3200
30
Wasp
Light Aircraft
Wasp is a 200-cost short-ranged aerial chaff unit that can turn into a DPS threat with investment.
air
200
311
16
202
0
1.4
50
AIR & GROUND
50
900
120
Wraith
Heavy Aircraft
Wraith is a tanky 300-cost short-ranged aerial unit with 4 cannons that are strong against light units and shoot different targets.
air
300
14115
10
381
8
1.6
60
AIR & GROUND
50
2250
120