🥳
WindFrame is here: Design, prototype and code
sale icon End of Summer Sale 🎁 Get Contrast PRO UI library + admin template with 5 admin dahsboards, 23 pages and 10000+ components at 60% off 🎉

DataTable

React Bootstrap DataTables

React Bootstrap DataTables are components that mix tables with advanced options like searching, sorting and pagination.

Importing the DataTable Component

To use the Contrast React Bootstrap DateTable component, you import CDBDateTable into your project.

1import { CDBDataTable } from "cdbreact";

In this tutorial we use the CDBCard component for the table body. Check out the docs for more understanding.

Default DataTable

React Bootstrap Default DateTable

1import React from "react";
2import { CDBCard, CDBCardBody, CDBDataTable, CDBContainer } from "cdbreact";
3
4const DataTable = () => {
5
6 function testClickEvent(param) {
7 alert("Row Click Event");
8 }
9
10 const data = () =>{ return ({
11 columns: [
12 {
13 label: "Name",
14 field: "name",
15 width: 150,
16 attributes: {
17 "aria-controls": "DataTable",
18 "aria-label": "Name",
19 },
20 },
21 {
22 label: "Position",
23 field: "position",
24 width: 270,
25 },
26 {
27 label: "Office",
28 field: "office",
29 width: 200,
30 },
31 {
32 label: "Age",
33 field: "age",
34 sort: "asc",
35 width: 100,
36 },
37 {
38 label: "Start date",
39 field: "date",
40 sort: "disabled",
41 width: 150,
42 },
43 {
44 label: "Salary",
45 field: "salary",
46 sort: "disabled",
47 width: 100,
48 },
49 ],
50 rows: [
51 {
52 name: "Tiger Nixon",
53 position: "System Architect",
54 office: "Edinburgh",
55 age: "61",
56 date: "2011/04/25",
57 salary: "$320",
58 clickEvent: () => testClickEvent(1),
59 },
60 {
61 name: "Garrett Winters",
62 position: "Accountant",
63 office: "Tokyo",
64 age: "63",
65 date: "2011/07/25",
66 salary: "$170",
67 },
68 {
69 name: "Ashton Cox",
70 position: "Junior Technical Author",
71 office: "San Francisco",
72 age: "66",
73 date: "2009/01/12",
74 salary: "$86",
75 },
76 {
77 name: "Cedric Kelly",
78 position: "Senior Javascript Developer",
79 office: "Edinburgh",
80 age: "22",
81 date: "2012/03/29",
82 salary: "$433",
83 },
84 {
85 name: "Airi Satou",
86 position: "Accountant",
87 office: "Tokyo",
88 age: "33",
89 date: "2008/11/28",
90 salary: "$162",
91 },
92 {
93 name: "Brielle Williamson",
94 position: "Integration Specialist",
95 office: "New York",
96 age: "61",
97 date: "2012/12/02",
98 salary: "$372",
99 },
100 {
101 name: "Herrod Chandler",
102 position: "Sales Assistant",
103 office: "San Francisco",
104 age: "59",
105 date: "2012/08/06",
106 salary: "$137",
107 },
108 {
109 name: "Rhona Davidson",
110 position: "Integration Specialist",
111 office: "Tokyo",
112 age: "55",
113 date: "2010/10/14",
114 salary: "$327",
115 },
116 {
117 name: "Colleen Hurst",
118 position: "Javascript Developer",
119 office: "San Francisco",
120 age: "39",
121 date: "2009/09/15",
122 salary: "$205",
123 },
124 {
125 name: "Sonya Frost",
126 position: "Software Engineer",
127 office: "Edinburgh",
128 age: "23",
129 date: "2008/12/13",
130 salary: "$103",
131 },
132 {
133 name: "Jena Gaines",
134 position: "Office Manager",
135 office: "London",
136 age: "30",
137 date: "2008/12/19",
138 salary: "$90",
139 },
140 {
141 name: "Quinn Flynn",
142 position: "Support Lead",
143 office: "Edinburgh",
144 age: "22",
145 date: "2013/03/03",
146 salary: "$342",
147 },
148 {
149 name: "Charde Marshall",
150 position: "Regional Director",
151 office: "San Francisco",
152 age: "36",
153 date: "2008/10/16",
154 salary: "$470",
155 },
156 {
157 name: "Haley Kennedy",
158 position: "Senior Marketing Designer",
159 office: "London",
160 age: "43",
161 date: "2012/12/18",
162 salary: "$313",
163 },
164 {
165 name: "Tatyana Fitzpatrick",
166 position: "Regional Director",
167 office: "London",
168 age: "19",
169 date: "2010/03/17",
170 salary: "$385",
171 },
172 {
173 name: "Michael Silva",
174 position: "Marketing Designer",
175 office: "London",
176 age: "66",
177 date: "2012/11/27",
178 salary: "$198",
179 },
180 {
181 name: "Paul Byrd",
182 position: "Chief Financial Officer (CFO)",
183 office: "New York",
184 age: "64",
185 date: "2010/06/09",
186 salary: "$725",
187 },
188 {
189 name: "Gloria Little",
190 position: "Systems Administrator",
191 office: "New York",
192 age: "59",
193 date: "2009/04/10",
194 salary: "$237",
195 },
196 {
197 name: "Bradley Greer",
198 position: "Software Engineer",
199 office: "London",
200 age: "41",
201 date: "2012/10/13",
202 salary: "$132",
203 },
204 {
205 name: "Dai Rios",
206 position: "Personnel Lead",
207 office: "Edinburgh",
208 age: "35",
209 date: "2012/09/26",
210 salary: "$217",
211 },
212 {
213 name: "Jenette Caldwell",
214 position: "Development Lead",
215 office: "New York",
216 age: "30",
217 date: "2011/09/03",
218 salary: "$345",
219 },
220 {
221 name: "Yuri Berry",
222 position: "Chief Marketing Officer (CMO)",
223 office: "New York",
224 age: "40",
225 date: "2009/06/25",
226 salary: "$675",
227 },
228 {
229 name: "Caesar Vance",
230 position: "Pre-Sales Support",
231 office: "New York",
232 age: "21",
233 date: "2011/12/12",
234 salary: "$106",
235 },
236 {
237 name: "Doris Wilder",
238 position: "Sales Assistant",
239 office: "Sidney",
240 age: "23",
241 date: "2010/09/20",
242 salary: "$85",
243 },
244 {
245 name: "Angelica Ramos",
246 position: "Chief Executive Officer (CEO)",
247 office: "London",
248 age: "47",
249 date: "2009/10/09",
250 salary: "$1",
251 },
252 {
253 name: "Gavin Joyce",
254 position: "Developer",
255 office: "Edinburgh",
256 age: "42",
257 date: "2010/12/22",
258 salary: "$92",
259 },
260 {
261 name: "Jennifer Chang",
262 position: "Regional Director",
263 office: "Singapore",
264 age: "28",
265 date: "2010/11/14",
266 salary: "$357",
267 },
268 {
269 name: "Brenden Wagner",
270 position: "Software Engineer",
271 office: "San Francisco",
272 age: "28",
273 date: "2011/06/07",
274 salary: "$206",
275 },
276 {
277 name: "Fiona Green",
278 position: "Chief Operating Officer (COO)",
279 office: "San Francisco",
280 age: "48",
281 date: "2010/03/11",
282 salary: "$850",
283 },
284 {
285 name: "Shou Itou",
286 position: "Regional Marketing",
287 office: "Tokyo",
288 age: "20",
289 date: "2011/08/14",
290 salary: "$163",
291 },
292 {
293 name: "Michelle House",
294 position: "Integration Specialist",
295 office: "Sidney",
296 age: "37",
297 date: "2011/06/02",
298 salary: "$95",
299 },
300 {
301 name: "Suki Burks",
302 position: "Developer",
303 office: "London",
304 age: "53",
305 date: "2009/10/22",
306 salary: "$114",
307 },
308 {
309 name: "Prescott Bartlett",
310 position: "Technical Author",
311 office: "London",
312 age: "27",
313 date: "2011/05/07",
314 salary: "$145",
315 },
316
317 {
318 name: "Donna Snider",
319 position: "Customer Support",
320 office: "New York",
321 age: "27",
322 date: "2011/01/25",
323 salary: "$112",
324 },
325 ],
326 }); };
327 return (
328 <CDBContainer>
329 <CDBCard>
330 <CDBCardBody>
331 <CDBDataTable
332 striped
333 bordered
334 hover
335 entriesOptions={[5, 20, 25]}
336 entries={5}
337 pagesAmount={4}
338 data={data()}
339 materialSearch={true}
340 />
341 </CDBCardBody>
342 </CDBCard>
343 </CDBContainer>
344 );
345};
346
347export default DataTable;

Not Striped

React Bootstrap Not Striped DateTable

1import React from "react";
2import { CDBCard, CDBCardBody, CDBDataTable, CDBContainer } from "cdbreact";
3
4const DataTable = () => {
5
6 function testClickEvent(param) {
7 alert("Row Click Event");
8 }
9
10 const data = () =>{ return ({
11 columns: [
12 {
13 label: "Name",
14 field: "name",
15 width: 150,
16 attributes: {
17 "aria-controls": "DataTable",
18 "aria-label": "Name",
19 },
20 },
21 {
22 label: "Position",
23 field: "position",
24 width: 270,
25 },
26 {
27 label: "Office",
28 field: "office",
29 width: 200,
30 },
31 {
32 label: "Age",
33 field: "age",
34 sort: "asc",
35 width: 100,
36 },
37 {
38 label: "Start date",
39 field: "date",
40 sort: "disabled",
41 width: 150,
42 },
43 {
44 label: "Salary",
45 field: "salary",
46 sort: "disabled",
47 width: 100,
48 },
49 ],
50 rows: [
51 {
52 name: "Tiger Nixon",
53 position: "System Architect",
54 office: "Edinburgh",
55 age: "61",
56 date: "2011/04/25",
57 salary: "$320",
58 clickEvent: () => testClickEvent(1),
59 },
60 {
61 name: "Garrett Winters",
62 position: "Accountant",
63 office: "Tokyo",
64 age: "63",
65 date: "2011/07/25",
66 salary: "$170",
67 },
68 {
69 name: "Ashton Cox",
70 position: "Junior Technical Author",
71 office: "San Francisco",
72 age: "66",
73 date: "2009/01/12",
74 salary: "$86",
75 },
76 {
77 name: "Cedric Kelly",
78 position: "Senior Javascript Developer",
79 office: "Edinburgh",
80 age: "22",
81 date: "2012/03/29",
82 salary: "$433",
83 },
84 {
85 name: "Airi Satou",
86 position: "Accountant",
87 office: "Tokyo",
88 age: "33",
89 date: "2008/11/28",
90 salary: "$162",
91 },
92 {
93 name: "Brielle Williamson",
94 position: "Integration Specialist",
95 office: "New York",
96 age: "61",
97 date: "2012/12/02",
98 salary: "$372",
99 },
100 {
101 name: "Herrod Chandler",
102 position: "Sales Assistant",
103 office: "San Francisco",
104 age: "59",
105 date: "2012/08/06",
106 salary: "$137",
107 },
108 {
109 name: "Rhona Davidson",
110 position: "Integration Specialist",
111 office: "Tokyo",
112 age: "55",
113 date: "2010/10/14",
114 salary: "$327",
115 },
116 {
117 name: "Colleen Hurst",
118 position: "Javascript Developer",
119 office: "San Francisco",
120 age: "39",
121 date: "2009/09/15",
122 salary: "$205",
123 },
124 {
125 name: "Sonya Frost",
126 position: "Software Engineer",
127 office: "Edinburgh",
128 age: "23",
129 date: "2008/12/13",
130 salary: "$103",
131 },
132 {
133 name: "Jena Gaines",
134 position: "Office Manager",
135 office: "London",
136 age: "30",
137 date: "2008/12/19",
138 salary: "$90",
139 },
140 {
141 name: "Quinn Flynn",
142 position: "Support Lead",
143 office: "Edinburgh",
144 age: "22",
145 date: "2013/03/03",
146 salary: "$342",
147 },
148 {
149 name: "Charde Marshall",
150 position: "Regional Director",
151 office: "San Francisco",
152 age: "36",
153 date: "2008/10/16",
154 salary: "$470",
155 },
156 {
157 name: "Haley Kennedy",
158 position: "Senior Marketing Designer",
159 office: "London",
160 age: "43",
161 date: "2012/12/18",
162 salary: "$313",
163 },
164 {
165 name: "Tatyana Fitzpatrick",
166 position: "Regional Director",
167 office: "London",
168 age: "19",
169 date: "2010/03/17",
170 salary: "$385",
171 },
172 {
173 name: "Michael Silva",
174 position: "Marketing Designer",
175 office: "London",
176 age: "66",
177 date: "2012/11/27",
178 salary: "$198",
179 },
180 {
181 name: "Paul Byrd",
182 position: "Chief Financial Officer (CFO)",
183 office: "New York",
184 age: "64",
185 date: "2010/06/09",
186 salary: "$725",
187 },
188 {
189 name: "Gloria Little",
190 position: "Systems Administrator",
191 office: "New York",
192 age: "59",
193 date: "2009/04/10",
194 salary: "$237",
195 },
196 {
197 name: "Bradley Greer",
198 position: "Software Engineer",
199 office: "London",
200 age: "41",
201 date: "2012/10/13",
202 salary: "$132",
203 },
204 {
205 name: "Dai Rios",
206 position: "Personnel Lead",
207 office: "Edinburgh",
208 age: "35",
209 date: "2012/09/26",
210 salary: "$217",
211 },
212 {
213 name: "Jenette Caldwell",
214 position: "Development Lead",
215 office: "New York",
216 age: "30",
217 date: "2011/09/03",
218 salary: "$345",
219 },
220 {
221 name: "Yuri Berry",
222 position: "Chief Marketing Officer (CMO)",
223 office: "New York",
224 age: "40",
225 date: "2009/06/25",
226 salary: "$675",
227 },
228 {
229 name: "Caesar Vance",
230 position: "Pre-Sales Support",
231 office: "New York",
232 age: "21",
233 date: "2011/12/12",
234 salary: "$106",
235 },
236 {
237 name: "Doris Wilder",
238 position: "Sales Assistant",
239 office: "Sidney",
240 age: "23",
241 date: "2010/09/20",
242 salary: "$85",
243 },
244 {
245 name: "Angelica Ramos",
246 position: "Chief Executive Officer (CEO)",
247 office: "London",
248 age: "47",
249 date: "2009/10/09",
250 salary: "$1",
251 },
252 {
253 name: "Gavin Joyce",
254 position: "Developer",
255 office: "Edinburgh",
256 age: "42",
257 date: "2010/12/22",
258 salary: "$92",
259 },
260 {
261 name: "Jennifer Chang",
262 position: "Regional Director",
263 office: "Singapore",
264 age: "28",
265 date: "2010/11/14",
266 salary: "$357",
267 },
268 {
269 name: "Brenden Wagner",
270 position: "Software Engineer",
271 office: "San Francisco",
272 age: "28",
273 date: "2011/06/07",
274 salary: "$206",
275 },
276 {
277 name: "Fiona Green",
278 position: "Chief Operating Officer (COO)",
279 office: "San Francisco",
280 age: "48",
281 date: "2010/03/11",
282 salary: "$850",
283 },
284 {
285 name: "Shou Itou",
286 position: "Regional Marketing",
287 office: "Tokyo",
288 age: "20",
289 date: "2011/08/14",
290 salary: "$163",
291 },
292 {
293 name: "Michelle House",
294 position: "Integration Specialist",
295 office: "Sidney",
296 age: "37",
297 date: "2011/06/02",
298 salary: "$95",
299 },
300 {
301 name: "Suki Burks",
302 position: "Developer",
303 office: "London",
304 age: "53",
305 date: "2009/10/22",
306 salary: "$114",
307 },
308 {
309 name: "Prescott Bartlett",
310 position: "Technical Author",
311 office: "London",
312 age: "27",
313 date: "2011/05/07",
314 salary: "$145",
315 },
316
317 {
318 name: "Donna Snider",
319 position: "Customer Support",
320 office: "New York",
321 age: "27",
322 date: "2011/01/25",
323 salary: "$112",
324 },
325 ],
326 }); };
327 return (
328 <CDBContainer>
329 <CDBCard>
330 <CDBCardBody>
331 <CDBDataTable
332 bordered
333 hover
334 entriesOptions={[5, 20, 25]}
335 entries={5}
336 pagesAmount={4}
337 data={data()}
338 materialSearch={true}
339 />
340 </CDBCardBody>
341 </CDBCard>
342 </CDBContainer>
343 );
344};
345
346export default DataTable;

Fixed Height

React Bootstrap Fixed Height DataTables

1import React from "react";
2import { CDBCard, CDBCardBody, CDBDataTable, CDBRow, CDBCol, CDBContainer } from "cdbreact";
3
4const DataTable = () => {
5
6 function testClickEvent(param) {
7 alert("Row Click Event");
8 }
9
10 const data = () =>{ return ({
11 columns: [
12 {
13 label: "Name",
14 field: "name",
15 width: 150,
16 attributes: {
17 "aria-controls": "DataTable",
18 "aria-label": "Name",
19 },
20 },
21 {
22 label: "Position",
23 field: "position",
24 width: 270,
25 },
26 {
27 label: "Office",
28 field: "office",
29 width: 200,
30 },
31 {
32 label: "Age",
33 field: "age",
34 sort: "asc",
35 width: 100,
36 },
37 {
38 label: "Start date",
39 field: "date",
40 sort: "disabled",
41 width: 150,
42 },
43 {
44 label: "Salary",
45 field: "salary",
46 sort: "disabled",
47 width: 100,
48 },
49 ],
50 rows: [
51 {
52 name: "Tiger Nixon",
53 position: "System Architect",
54 office: "Edinburgh",
55 age: "61",
56 date: "2011/04/25",
57 salary: "$320",
58 clickEvent: () => testClickEvent(1),
59 },
60 {
61 name: "Garrett Winters",
62 position: "Accountant",
63 office: "Tokyo",
64 age: "63",
65 date: "2011/07/25",
66 salary: "$170",
67 },
68 {
69 name: "Ashton Cox",
70 position: "Junior Technical Author",
71 office: "San Francisco",
72 age: "66",
73 date: "2009/01/12",
74 salary: "$86",
75 },
76 {
77 name: "Cedric Kelly",
78 position: "Senior Javascript Developer",
79 office: "Edinburgh",
80 age: "22",
81 date: "2012/03/29",
82 salary: "$433",
83 },
84 {
85 name: "Airi Satou",
86 position: "Accountant",
87 office: "Tokyo",
88 age: "33",
89 date: "2008/11/28",
90 salary: "$162",
91 },
92 {
93 name: "Brielle Williamson",
94 position: "Integration Specialist",
95 office: "New York",
96 age: "61",
97 date: "2012/12/02",
98 salary: "$372",
99 },
100 {
101 name: "Herrod Chandler",
102 position: "Sales Assistant",
103 office: "San Francisco",
104 age: "59",
105 date: "2012/08/06",
106 salary: "$137",
107 },
108 {
109 name: "Rhona Davidson",
110 position: "Integration Specialist",
111 office: "Tokyo",
112 age: "55",
113 date: "2010/10/14",
114 salary: "$327",
115 },
116 {
117 name: "Colleen Hurst",
118 position: "Javascript Developer",
119 office: "San Francisco",
120 age: "39",
121 date: "2009/09/15",
122 salary: "$205",
123 },
124 {
125 name: "Sonya Frost",
126 position: "Software Engineer",
127 office: "Edinburgh",
128 age: "23",
129 date: "2008/12/13",
130 salary: "$103",
131 },
132 {
133 name: "Jena Gaines",
134 position: "Office Manager",
135 office: "London",
136 age: "30",
137 date: "2008/12/19",
138 salary: "$90",
139 },
140 {
141 name: "Quinn Flynn",
142 position: "Support Lead",
143 office: "Edinburgh",
144 age: "22",
145 date: "2013/03/03",
146 salary: "$342",
147 },
148 {
149 name: "Charde Marshall",
150 position: "Regional Director",
151 office: "San Francisco",
152 age: "36",
153 date: "2008/10/16",
154 salary: "$470",
155 },
156 {
157 name: "Haley Kennedy",
158 position: "Senior Marketing Designer",
159 office: "London",
160 age: "43",
161 date: "2012/12/18",
162 salary: "$313",
163 },
164 {
165 name: "Tatyana Fitzpatrick",
166 position: "Regional Director",
167 office: "London",
168 age: "19",
169 date: "2010/03/17",
170 salary: "$385",
171 },
172 {
173 name: "Michael Silva",
174 position: "Marketing Designer",
175 office: "London",
176 age: "66",
177 date: "2012/11/27",
178 salary: "$198",
179 },
180 {
181 name: "Paul Byrd",
182 position: "Chief Financial Officer (CFO)",
183 office: "New York",
184 age: "64",
185 date: "2010/06/09",
186 salary: "$725",
187 },
188 {
189 name: "Gloria Little",
190 position: "Systems Administrator",
191 office: "New York",
192 age: "59",
193 date: "2009/04/10",
194 salary: "$237",
195 },
196 {
197 name: "Bradley Greer",
198 position: "Software Engineer",
199 office: "London",
200 age: "41",
201 date: "2012/10/13",
202 salary: "$132",
203 },
204 {
205 name: "Dai Rios",
206 position: "Personnel Lead",
207 office: "Edinburgh",
208 age: "35",
209 date: "2012/09/26",
210 salary: "$217",
211 },
212 {
213 name: "Jenette Caldwell",
214 position: "Development Lead",
215 office: "New York",
216 age: "30",
217 date: "2011/09/03",
218 salary: "$345",
219 },
220 {
221 name: "Yuri Berry",
222 position: "Chief Marketing Officer (CMO)",
223 office: "New York",
224 age: "40",
225 date: "2009/06/25",
226 salary: "$675",
227 },
228 {
229 name: "Caesar Vance",
230 position: "Pre-Sales Support",
231 office: "New York",
232 age: "21",
233 date: "2011/12/12",
234 salary: "$106",
235 },
236 {
237 name: "Doris Wilder",
238 position: "Sales Assistant",
239 office: "Sidney",
240 age: "23",
241 date: "2010/09/20",
242 salary: "$85",
243 },
244 {
245 name: "Angelica Ramos",
246 position: "Chief Executive Officer (CEO)",
247 office: "London",
248 age: "47",
249 date: "2009/10/09",
250 salary: "$1",
251 },
252 {
253 name: "Gavin Joyce",
254 position: "Developer",
255 office: "Edinburgh",
256 age: "42",
257 date: "2010/12/22",
258 salary: "$92",
259 },
260 {
261 name: "Jennifer Chang",
262 position: "Regional Director",
263 office: "Singapore",
264 age: "28",
265 date: "2010/11/14",
266 salary: "$357",
267 },
268 {
269 name: "Brenden Wagner",
270 position: "Software Engineer",
271 office: "San Francisco",
272 age: "28",
273 date: "2011/06/07",
274 salary: "$206",
275 },
276 {
277 name: "Fiona Green",
278 position: "Chief Operating Officer (COO)",
279 office: "San Francisco",
280 age: "48",
281 date: "2010/03/11",
282 salary: "$850",
283 },
284 {
285 name: "Shou Itou",
286 position: "Regional Marketing",
287 office: "Tokyo",
288 age: "20",
289 date: "2011/08/14",
290 salary: "$163",
291 },
292 {
293 name: "Michelle House",
294 position: "Integration Specialist",
295 office: "Sidney",
296 age: "37",
297 date: "2011/06/02",
298 salary: "$95",
299 },
300 {
301 name: "Suki Burks",
302 position: "Developer",
303 office: "London",
304 age: "53",
305 date: "2009/10/22",
306 salary: "$114",
307 },
308 {
309 name: "Prescott Bartlett",
310 position: "Technical Author",
311 office: "London",
312 age: "27",
313 date: "2011/05/07",
314 salary: "$145",
315 },
316
317 {
318 name: "Donna Snider",
319 position: "Customer Support",
320 office: "New York",
321 age: "27",
322 date: "2011/01/25",
323 salary: "$112",
324 },
325 ],
326 }); };
327 return (
328 <CDBContainer>
329 <CDBCard>
330 <CDBCardBody>
331 <CDBDataTable
332 striped
333 bordered
334 hover
335 scrollY
336 maxHeight="50vh"
337 data={data()}
338 materialSearch
339 />
340 </CDBCardBody>
341 </CDBCard>
342 </CDBContainer>
343 );
344};
345
346export default DataTable;

Disabled Button

React Bootstrap Disabled Button

1import React from "react";
2import { CDBCard, CDBCardBody, CDBDataTable, CDBRow, CDBCol, CDBContainer } from "cdbreact";
3
4const DataTable = () => {
5
6 function testClickEvent(param) {
7 alert("Row Click Event");
8 }
9
10 const data = () =>{ return ({
11 columns: [
12 {
13 label: "Name",
14 field: "name",
15 width: 150,
16 attributes: {
17 "aria-controls": "DataTable",
18 "aria-label": "Name",
19 },
20 },
21 {
22 label: "Position",
23 field: "position",
24 width: 270,
25 },
26 {
27 label: "Office",
28 field: "office",
29 width: 200,
30 },
31 {
32 label: "Age",
33 field: "age",
34 sort: "asc",
35 width: 100,
36 },
37 {
38 label: "Start date",
39 field: "date",
40 sort: "disabled",
41 width: 150,
42 },
43 {
44 label: "Salary",
45 field: "salary",
46 sort: "disabled",
47 width: 100,
48 },
49 ],
50 rows: [
51 {
52 name: "Tiger Nixon",
53 position: "System Architect",
54 office: "Edinburgh",
55 age: "61",
56 date: "2011/04/25",
57 salary: "$320",
58 clickEvent: () => testClickEvent(1),
59 },
60 {
61 name: "Garrett Winters",
62 position: "Accountant",
63 office: "Tokyo",
64 age: "63",
65 date: "2011/07/25",
66 salary: "$170",
67 },
68 {
69 name: "Ashton Cox",
70 position: "Junior Technical Author",
71 office: "San Francisco",
72 age: "66",
73 date: "2009/01/12",
74 salary: "$86",
75 },
76 {
77 name: "Cedric Kelly",
78 position: "Senior Javascript Developer",
79 office: "Edinburgh",
80 age: "22",
81 date: "2012/03/29",
82 salary: "$433",
83 },
84 {
85 name: "Airi Satou",
86 position: "Accountant",
87 office: "Tokyo",
88 age: "33",
89 date: "2008/11/28",
90 salary: "$162",
91 },
92 {
93 name: "Brielle Williamson",
94 position: "Integration Specialist",
95 office: "New York",
96 age: "61",
97 date: "2012/12/02",
98 salary: "$372",
99 },
100 {
101 name: "Herrod Chandler",
102 position: "Sales Assistant",
103 office: "San Francisco",
104 age: "59",
105 date: "2012/08/06",
106 salary: "$137",
107 },
108 {
109 name: "Rhona Davidson",
110 position: "Integration Specialist",
111 office: "Tokyo",
112 age: "55",
113 date: "2010/10/14",
114 salary: "$327",
115 },
116 {
117 name: "Colleen Hurst",
118 position: "Javascript Developer",
119 office: "San Francisco",
120 age: "39",
121 date: "2009/09/15",
122 salary: "$205",
123 },
124 {
125 name: "Sonya Frost",
126 position: "Software Engineer",
127 office: "Edinburgh",
128 age: "23",
129 date: "2008/12/13",
130 salary: "$103",
131 },
132 {
133 name: "Jena Gaines",
134 position: "Office Manager",
135 office: "London",
136 age: "30",
137 date: "2008/12/19",
138 salary: "$90",
139 },
140 {
141 name: "Quinn Flynn",
142 position: "Support Lead",
143 office: "Edinburgh",
144 age: "22",
145 date: "2013/03/03",
146 salary: "$342",
147 },
148 {
149 name: "Charde Marshall",
150 position: "Regional Director",
151 office: "San Francisco",
152 age: "36",
153 date: "2008/10/16",
154 salary: "$470",
155 },
156 {
157 name: "Haley Kennedy",
158 position: "Senior Marketing Designer",
159 office: "London",
160 age: "43",
161 date: "2012/12/18",
162 salary: "$313",
163 },
164 {
165 name: "Tatyana Fitzpatrick",
166 position: "Regional Director",
167 office: "London",
168 age: "19",
169 date: "2010/03/17",
170 salary: "$385",
171 },
172 {
173 name: "Michael Silva",
174 position: "Marketing Designer",
175 office: "London",
176 age: "66",
177 date: "2012/11/27",
178 salary: "$198",
179 },
180 {
181 name: "Paul Byrd",
182 position: "Chief Financial Officer (CFO)",
183 office: "New York",
184 age: "64",
185 date: "2010/06/09",
186 salary: "$725",
187 },
188 {
189 name: "Gloria Little",
190 position: "Systems Administrator",
191 office: "New York",
192 age: "59",
193 date: "2009/04/10",
194 salary: "$237",
195 },
196 {
197 name: "Bradley Greer",
198 position: "Software Engineer",
199 office: "London",
200 age: "41",
201 date: "2012/10/13",
202 salary: "$132",
203 },
204 {
205 name: "Dai Rios",
206 position: "Personnel Lead",
207 office: "Edinburgh",
208 age: "35",
209 date: "2012/09/26",
210 salary: "$217",
211 },
212 {
213 name: "Jenette Caldwell",
214 position: "Development Lead",
215 office: "New York",
216 age: "30",
217 date: "2011/09/03",
218 salary: "$345",
219 },
220 {
221 name: "Yuri Berry",
222 position: "Chief Marketing Officer (CMO)",
223 office: "New York",
224 age: "40",
225 date: "2009/06/25",
226 salary: "$675",
227 },
228 {
229 name: "Caesar Vance",
230 position: "Pre-Sales Support",
231 office: "New York",
232 age: "21",
233 date: "2011/12/12",
234 salary: "$106",
235 },
236 {
237 name: "Doris Wilder",
238 position: "Sales Assistant",
239 office: "Sidney",
240 age: "23",
241 date: "2010/09/20",
242 salary: "$85",
243 },
244 {
245 name: "Angelica Ramos",
246 position: "Chief Executive Officer (CEO)",
247 office: "London",
248 age: "47",
249 date: "2009/10/09",
250 salary: "$1",
251 },
252 {
253 name: "Gavin Joyce",
254 position: "Developer",
255 office: "Edinburgh",
256 age: "42",
257 date: "2010/12/22",
258 salary: "$92",
259 },
260 {
261 name: "Jennifer Chang",
262 position: "Regional Director",
263 office: "Singapore",
264 age: "28",
265 date: "2010/11/14",
266 salary: "$357",
267 },
268 {
269 name: "Brenden Wagner",
270 position: "Software Engineer",
271 office: "San Francisco",
272 age: "28",
273 date: "2011/06/07",
274 salary: "$206",
275 },
276 {
277 name: "Fiona Green",
278 position: "Chief Operating Officer (COO)",
279 office: "San Francisco",
280 age: "48",
281 date: "2010/03/11",
282 salary: "$850",
283 },
284 {
285 name: "Shou Itou",
286 position: "Regional Marketing",
287 office: "Tokyo",
288 age: "20",
289 date: "2011/08/14",
290 salary: "$163",
291 },
292 {
293 name: "Michelle House",
294 position: "Integration Specialist",
295 office: "Sidney",
296 age: "37",
297 date: "2011/06/02",
298 salary: "$95",
299 },
300 {
301 name: "Suki Burks",
302 position: "Developer",
303 office: "London",
304 age: "53",
305 date: "2009/10/22",
306 salary: "$114",
307 },
308 {
309 name: "Prescott Bartlett",
310 position: "Technical Author",
311 office: "London",
312 age: "27",
313 date: "2011/05/07",
314 salary: "$145",
315 },
316
317 {
318 name: "Donna Snider",
319 position: "Customer Support",
320 office: "New York",
321 age: "27",
322 date: "2011/01/25",
323 salary: "$112",
324 },
325 ],
326 }); };
327 return (
328 <CDBContainer>
329 <CDBCard>
330 <CDBCardBody>
331 <CDBDataTable
332 striped
333 bordered
334 hover
335 scrollX
336 data={data()}
337 materialSearch
338 />
339 </CDBCardBody>
340 </CDBCard>
341 </CDBContainer>
342 );
343};
344
345export default DataTable;

Full Pagination

React Bootstrap Full Pagination DataTables

1import React from "react";
2import { CDBCard, CDBCardBody, CDBDataTable, CDBRow, CDBCol, CDBContainer } from "cdbreact";
3
4const DataTable = () => {
5
6 function testClickEvent(param) {
7 alert("Row Click Event");
8 }
9
10 const data = () =>{ return ({
11 columns: [
12 {
13 label: "Name",
14 field: "name",
15 width: 150,
16 attributes: {
17 "aria-controls": "DataTable",
18 "aria-label": "Name",
19 },
20 },
21 {
22 label: "Position",
23 field: "position",
24 width: 270,
25 },
26 {
27 label: "Office",
28 field: "office",
29 width: 200,
30 },
31 {
32 label: "Age",
33 field: "age",
34 sort: "asc",
35 width: 100,
36 },
37 {
38 label: "Start date",
39 field: "date",
40 sort: "disabled",
41 width: 150,
42 },
43 {
44 label: "Salary",
45 field: "salary",
46 sort: "disabled",
47 width: 100,
48 },
49 ],
50 rows: [
51 {
52 name: "Tiger Nixon",
53 position: "System Architect",
54 office: "Edinburgh",
55 age: "61",
56 date: "2011/04/25",
57 salary: "$320",
58 clickEvent: () => testClickEvent(1),
59 },
60 {
61 name: "Garrett Winters",
62 position: "Accountant",
63 office: "Tokyo",
64 age: "63",
65 date: "2011/07/25",
66 salary: "$170",
67 },
68 {
69 name: "Ashton Cox",
70 position: "Junior Technical Author",
71 office: "San Francisco",
72 age: "66",
73 date: "2009/01/12",
74 salary: "$86",
75 },
76 {
77 name: "Cedric Kelly",
78 position: "Senior Javascript Developer",
79 office: "Edinburgh",
80 age: "22",
81 date: "2012/03/29",
82 salary: "$433",
83 },
84 {
85 name: "Airi Satou",
86 position: "Accountant",
87 office: "Tokyo",
88 age: "33",
89 date: "2008/11/28",
90 salary: "$162",
91 },
92 {
93 name: "Brielle Williamson",
94 position: "Integration Specialist",
95 office: "New York",
96 age: "61",
97 date: "2012/12/02",
98 salary: "$372",
99 },
100 {
101 name: "Herrod Chandler",
102 position: "Sales Assistant",
103 office: "San Francisco",
104 age: "59",
105 date: "2012/08/06",
106 salary: "$137",
107 },
108 {
109 name: "Rhona Davidson",
110 position: "Integration Specialist",
111 office: "Tokyo",
112 age: "55",
113 date: "2010/10/14",
114 salary: "$327",
115 },
116 {
117 name: "Colleen Hurst",
118 position: "Javascript Developer",
119 office: "San Francisco",
120 age: "39",
121 date: "2009/09/15",
122 salary: "$205",
123 },
124 {
125 name: "Sonya Frost",
126 position: "Software Engineer",
127 office: "Edinburgh",
128 age: "23",
129 date: "2008/12/13",
130 salary: "$103",
131 },
132 {
133 name: "Jena Gaines",
134 position: "Office Manager",
135 office: "London",
136 age: "30",
137 date: "2008/12/19",
138 salary: "$90",
139 },
140 {
141 name: "Quinn Flynn",
142 position: "Support Lead",
143 office: "Edinburgh",
144 age: "22",
145 date: "2013/03/03",
146 salary: "$342",
147 },
148 {
149 name: "Charde Marshall",
150 position: "Regional Director",
151 office: "San Francisco",
152 age: "36",
153 date: "2008/10/16",
154 salary: "$470",
155 },
156 {
157 name: "Haley Kennedy",
158 position: "Senior Marketing Designer",
159 office: "London",
160 age: "43",
161 date: "2012/12/18",
162 salary: "$313",
163 },
164 {
165 name: "Tatyana Fitzpatrick",
166 position: "Regional Director",
167 office: "London",
168 age: "19",
169 date: "2010/03/17",
170 salary: "$385",
171 },
172 {
173 name: "Michael Silva",
174 position: "Marketing Designer",
175 office: "London",
176 age: "66",
177 date: "2012/11/27",
178 salary: "$198",
179 },
180 {
181 name: "Paul Byrd",
182 position: "Chief Financial Officer (CFO)",
183 office: "New York",
184 age: "64",
185 date: "2010/06/09",
186 salary: "$725",
187 },
188 {
189 name: "Gloria Little",
190 position: "Systems Administrator",
191 office: "New York",
192 age: "59",
193 date: "2009/04/10",
194 salary: "$237",
195 },
196 {
197 name: "Bradley Greer",
198 position: "Software Engineer",
199 office: "London",
200 age: "41",
201 date: "2012/10/13",
202 salary: "$132",
203 },
204 {
205 name: "Dai Rios",
206 position: "Personnel Lead",
207 office: "Edinburgh",
208 age: "35",
209 date: "2012/09/26",
210 salary: "$217",
211 },
212 {
213 name: "Jenette Caldwell",
214 position: "Development Lead",
215 office: "New York",
216 age: "30",
217 date: "2011/09/03",
218 salary: "$345",
219 },
220 {
221 name: "Yuri Berry",
222 position: "Chief Marketing Officer (CMO)",
223 office: "New York",
224 age: "40",
225 date: "2009/06/25",
226 salary: "$675",
227 },
228 {
229 name: "Caesar Vance",
230 position: "Pre-Sales Support",
231 office: "New York",
232 age: "21",
233 date: "2011/12/12",
234 salary: "$106",
235 },
236 {
237 name: "Doris Wilder",
238 position: "Sales Assistant",
239 office: "Sidney",
240 age: "23",
241 date: "2010/09/20",
242 salary: "$85",
243 },
244 {
245 name: "Angelica Ramos",
246 position: "Chief Executive Officer (CEO)",
247 office: "London",
248 age: "47",
249 date: "2009/10/09",
250 salary: "$1",
251 },
252 {
253 name: "Gavin Joyce",
254 position: "Developer",
255 office: "Edinburgh",
256 age: "42",
257 date: "2010/12/22",
258 salary: "$92",
259 },
260 {
261 name: "Jennifer Chang",
262 position: "Regional Director",
263 office: "Singapore",
264 age: "28",
265 date: "2010/11/14",
266 salary: "$357",
267 },
268 {
269 name: "Brenden Wagner",
270 position: "Software Engineer",
271 office: "San Francisco",
272 age: "28",
273 date: "2011/06/07",
274 salary: "$206",
275 },
276 {
277 name: "Fiona Green",
278 position: "Chief Operating Officer (COO)",
279 office: "San Francisco",
280 age: "48",
281 date: "2010/03/11",
282 salary: "$850",
283 },
284 {
285 name: "Shou Itou",
286 position: "Regional Marketing",
287 office: "Tokyo",
288 age: "20",
289 date: "2011/08/14",
290 salary: "$163",
291 },
292 {
293 name: "Michelle House",
294 position: "Integration Specialist",
295 office: "Sidney",
296 age: "37",
297 date: "2011/06/02",
298 salary: "$95",
299 },
300 {
301 name: "Suki Burks",
302 position: "Developer",
303 office: "London",
304 age: "53",
305 date: "2009/10/22",
306 salary: "$114",
307 },
308 {
309 name: "Prescott Bartlett",
310 position: "Technical Author",
311 office: "London",
312 age: "27",
313 date: "2011/05/07",
314 salary: "$145",
315 },
316
317 {
318 name: "Donna Snider",
319 position: "Customer Support",
320 office: "New York",
321 age: "27",
322 date: "2011/01/25",
323 salary: "$112",
324 },
325 ],
326 }); };
327 return (
328 <CDBContainer>
329 <CDBCard>
330 <CDBCardBody>
331 <CDBDataTable
332 striped
333 bordered
334 hover
335 scrollX
336 scrollY
337 maxHeight="300xp"
338 data={data()}
339 materialSearch
340 fullPagination
341 />
342 </CDBCardBody>
343 </CDBCard>
344 </CDBContainer>
345 );
346};
347
348export default DataTable;

Checkbox

React Bootstrap Checkbox

1import React from "react";
2import { CDBCard, CDBCardBody, CDBDataTable, CDBContainer } from "cdbreact";
3
4const DataTable = () => {
5
6 function testClickEvent(param) {
7 alert("Row Click Event");
8 }
9
10 const data = () =>{ return ({
11 columns: [
12 {
13 label: "Name",
14 field: "name",
15 width: 150,
16 attributes: {
17 "aria-controls": "DataTable",
18 "aria-label": "Name",
19 },
20 },
21 {
22 label: "Position",
23 field: "position",
24 width: 270,
25 },
26 {
27 label: "Office",
28 field: "office",
29 width: 200,
30 },
31 {
32 label: "Age",
33 field: "age",
34 sort: "asc",
35 width: 100,
36 },
37 {
38 label: "Start date",
39 field: "date",
40 sort: "disabled",
41 width: 150,
42 },
43 {
44 label: "Salary",
45 field: "salary",
46 sort: "disabled",
47 width: 100,
48 },
49 ],
50 rows: [
51 {
52 name: "Tiger Nixon",
53 position: "System Architect",
54 office: "Edinburgh",
55 age: "61",
56 date: "2011/04/25",
57 salary: "$320",
58 clickEvent: () => testClickEvent(1),
59 },
60 {
61 name: "Garrett Winters",
62 position: "Accountant",
63 office: "Tokyo",
64 age: "63",
65 date: "2011/07/25",
66 salary: "$170",
67 },
68 {
69 name: "Ashton Cox",
70 position: "Junior Technical Author",
71 office: "San Francisco",
72 age: "66",
73 date: "2009/01/12",
74 salary: "$86",
75 },
76 {
77 name: "Cedric Kelly",
78 position: "Senior Javascript Developer",
79 office: "Edinburgh",
80 age: "22",
81 date: "2012/03/29",
82 salary: "$433",
83 },
84 {
85 name: "Airi Satou",
86 position: "Accountant",
87 office: "Tokyo",
88 age: "33",
89 date: "2008/11/28",
90 salary: "$162",
91 },
92 {
93 name: "Brielle Williamson",
94 position: "Integration Specialist",
95 office: "New York",
96 age: "61",
97 date: "2012/12/02",
98 salary: "$372",
99 },
100 {
101 name: "Herrod Chandler",
102 position: "Sales Assistant",
103 office: "San Francisco",
104 age: "59",
105 date: "2012/08/06",
106 salary: "$137",
107 },
108 {
109 name: "Rhona Davidson",
110 position: "Integration Specialist",
111 office: "Tokyo",
112 age: "55",
113 date: "2010/10/14",
114 salary: "$327",
115 },
116 {
117 name: "Colleen Hurst",
118 position: "Javascript Developer",
119 office: "San Francisco",
120 age: "39",
121 date: "2009/09/15",
122 salary: "$205",
123 },
124 {
125 name: "Sonya Frost",
126 position: "Software Engineer",
127 office: "Edinburgh",
128 age: "23",
129 date: "2008/12/13",
130 salary: "$103",
131 },
132 {
133 name: "Jena Gaines",
134 position: "Office Manager",
135 office: "London",
136 age: "30",
137 date: "2008/12/19",
138 salary: "$90",
139 },
140 {
141 name: "Quinn Flynn",
142 position: "Support Lead",
143 office: "Edinburgh",
144 age: "22",
145 date: "2013/03/03",
146 salary: "$342",
147 },
148 {
149 name: "Charde Marshall",
150 position: "Regional Director",
151 office: "San Francisco",
152 age: "36",
153 date: "2008/10/16",
154 salary: "$470",
155 },
156 {
157 name: "Haley Kennedy",
158 position: "Senior Marketing Designer",
159 office: "London",
160 age: "43",
161 date: "2012/12/18",
162 salary: "$313",
163 },
164 {
165 name: "Tatyana Fitzpatrick",
166 position: "Regional Director",
167 office: "London",
168 age: "19",
169 date: "2010/03/17",
170 salary: "$385",
171 },
172 {
173 name: "Michael Silva",
174 position: "Marketing Designer",
175 office: "London",
176 age: "66",
177 date: "2012/11/27",
178 salary: "$198",
179 },
180 {
181 name: "Paul Byrd",
182 position: "Chief Financial Officer (CFO)",
183 office: "New York",
184 age: "64",
185 date: "2010/06/09",
186 salary: "$725",
187 },
188 {
189 name: "Gloria Little",
190 position: "Systems Administrator",
191 office: "New York",
192 age: "59",
193 date: "2009/04/10",
194 salary: "$237",
195 },
196 {
197 name: "Bradley Greer",
198 position: "Software Engineer",
199 office: "London",
200 age: "41",
201 date: "2012/10/13",
202 salary: "$132",
203 },
204 {
205 name: "Dai Rios",
206 position: "Personnel Lead",
207 office: "Edinburgh",
208 age: "35",
209 date: "2012/09/26",
210 salary: "$217",
211 },
212 {
213 name: "Jenette Caldwell",
214 position: "Development Lead",
215 office: "New York",
216 age: "30",
217 date: "2011/09/03",
218 salary: "$345",
219 },
220 {
221 name: "Yuri Berry",
222 position: "Chief Marketing Officer (CMO)",
223 office: "New York",
224 age: "40",
225 date: "2009/06/25",
226 salary: "$675",
227 },
228 {
229 name: "Caesar Vance",
230 position: "Pre-Sales Support",
231 office: "New York",
232 age: "21",
233 date: "2011/12/12",
234 salary: "$106",
235 },
236 {
237 name: "Doris Wilder",
238 position: "Sales Assistant",
239 office: "Sidney",
240 age: "23",
241 date: "2010/09/20",
242 salary: "$85",
243 },
244 {
245 name: "Angelica Ramos",
246 position: "Chief Executive Officer (CEO)",
247 office: "London",
248 age: "47",
249 date: "2009/10/09",
250 salary: "$1",
251 },
252 {
253 name: "Gavin Joyce",
254 position: "Developer",
255 office: "Edinburgh",
256 age: "42",
257 date: "2010/12/22",
258 salary: "$92",
259 },
260 {
261 name: "Jennifer Chang",
262 position: "Regional Director",
263 office: "Singapore",
264 age: "28",
265 date: "2010/11/14",
266 salary: "$357",
267 },
268 {
269 name: "Brenden Wagner",
270 position: "Software Engineer",
271 office: "San Francisco",
272 age: "28",
273 date: "2011/06/07",
274 salary: "$206",
275 },
276 {
277 name: "Fiona Green",
278 position: "Chief Operating Officer (COO)",
279 office: "San Francisco",
280 age: "48",
281 date: "2010/03/11",
282 salary: "$850",
283 },
284 {
285 name: "Shou Itou",
286 position: "Regional Marketing",
287 office: "Tokyo",
288 age: "20",
289 date: "2011/08/14",
290 salary: "$163",
291 },
292 {
293 name: "Michelle House",
294 position: "Integration Specialist",
295 office: "Sidney",
296 age: "37",
297 date: "2011/06/02",
298 salary: "$95",
299 },
300 {
301 name: "Suki Burks",
302 position: "Developer",
303 office: "London",
304 age: "53",
305 date: "2009/10/22",
306 salary: "$114",
307 },
308 {
309 name: "Prescott Bartlett",
310 position: "Technical Author",
311 office: "London",
312 age: "27",
313 date: "2011/05/07",
314 salary: "$145",
315 },
316
317 {
318 name: "Donna Snider",
319 position: "Customer Support",
320 office: "New York",
321 age: "27",
322 date: "2011/01/25",
323 salary: "$112",
324 },
325 ],
326 }); };
327 return (
328 <CDBContainer>
329 <CDBCard>
330 <CDBCardBody>
331 <CDBDataTable
332 striped
333 bordered
334 hover
335 checkbox
336 data={data()}
337 materialSearch
338 />
339 </CDBCardBody>
340 </CDBCard>
341 </CDBContainer>
342 );
343};
344
345export default DataTable;

No Search

1import React from "react";
2import { CDBCard, CDBCardBody, CDBDataTable, CDBRow, CDBCol, CDBContainer } from "cdbreact";
3
4const DataTable = () => {
5
6 function testClickEvent(param) {
7 alert("Row Click Event");
8 }
9
10 const data = () =>{ return ({
11 columns: [
12 {
13 label: "Name",
14 field: "name",
15 width: 150,
16 attributes: {
17 "aria-controls": "DataTable",
18 "aria-label": "Name",
19 },
20 },
21 {
22 label: "Position",
23 field: "position",
24 width: 270,
25 },
26 {
27 label: "Office",
28 field: "office",
29 width: 200,
30 },
31 {
32 label: "Age",
33 field: "age",
34 sort: "asc",
35 width: 100,
36 },
37 {
38 label: "Start date",
39 field: "date",
40 sort: "disabled",
41 width: 150,
42 },
43 {
44 label: "Salary",
45 field: "salary",
46 sort: "disabled",
47 width: 100,
48 },
49 ],
50 rows: [
51 {
52 name: "Tiger Nixon",
53 position: "System Architect",
54 office: "Edinburgh",
55 age: "61",
56 date: "2011/04/25",
57 salary: "$320",
58 clickEvent: () => testClickEvent(1),
59 },
60 {
61 name: "Garrett Winters",
62 position: "Accountant",
63 office: "Tokyo",
64 age: "63",
65 date: "2011/07/25",
66 salary: "$170",
67 },
68 {
69 name: "Ashton Cox",
70 position: "Junior Technical Author",
71 office: "San Francisco",
72 age: "66",
73 date: "2009/01/12",
74 salary: "$86",
75 },
76 {
77 name: "Cedric Kelly",
78 position: "Senior Javascript Developer",
79 office: "Edinburgh",
80 age: "22",
81 date: "2012/03/29",
82 salary: "$433",
83 },
84 {
85 name: "Airi Satou",
86 position: "Accountant",
87 office: "Tokyo",
88 age: "33",
89 date: "2008/11/28",
90 salary: "$162",
91 },
92 {
93 name: "Brielle Williamson",
94 position: "Integration Specialist",
95 office: "New York",
96 age: "61",
97 date: "2012/12/02",
98 salary: "$372",
99 },
100 {
101 name: "Herrod Chandler",
102 position: "Sales Assistant",
103 office: "San Francisco",
104 age: "59",
105 date: "2012/08/06",
106 salary: "$137",
107 },
108 {
109 name: "Rhona Davidson",
110 position: "Integration Specialist",
111 office: "Tokyo",
112 age: "55",
113 date: "2010/10/14",
114 salary: "$327",
115 },
116 {
117 name: "Colleen Hurst",
118 position: "Javascript Developer",
119 office: "San Francisco",
120 age: "39",
121 date: "2009/09/15",
122 salary: "$205",
123 },
124 {
125 name: "Sonya Frost",
126 position: "Software Engineer",
127 office: "Edinburgh",
128 age: "23",
129 date: "2008/12/13",
130 salary: "$103",
131 },
132 {
133 name: "Jena Gaines",
134 position: "Office Manager",
135 office: "London",
136 age: "30",
137 date: "2008/12/19",
138 salary: "$90",
139 },
140 {
141 name: "Quinn Flynn",
142 position: "Support Lead",
143 office: "Edinburgh",
144 age: "22",
145 date: "2013/03/03",
146 salary: "$342",
147 },
148 {
149 name: "Charde Marshall",
150 position: "Regional Director",
151 office: "San Francisco",
152 age: "36",
153 date: "2008/10/16",
154 salary: "$470",
155 },
156 {
157 name: "Haley Kennedy",
158 position: "Senior Marketing Designer",
159 office: "London",
160 age: "43",
161 date: "2012/12/18",
162 salary: "$313",
163 },
164 {
165 name: "Tatyana Fitzpatrick",
166 position: "Regional Director",
167 office: "London",
168 age: "19",
169 date: "2010/03/17",
170 salary: "$385",
171 },
172 {
173 name: "Michael Silva",
174 position: "Marketing Designer",
175 office: "London",
176 age: "66",
177 date: "2012/11/27",
178 salary: "$198",
179 },
180 {
181 name: "Paul Byrd",
182 position: "Chief Financial Officer (CFO)",
183 office: "New York",
184 age: "64",
185 date: "2010/06/09",
186 salary: "$725",
187 },
188 {
189 name: "Gloria Little",
190 position: "Systems Administrator",
191 office: "New York",
192 age: "59",
193 date: "2009/04/10",
194 salary: "$237",
195 },
196 {
197 name: "Bradley Greer",
198 position: "Software Engineer",
199 office: "London",
200 age: "41",
201 date: "2012/10/13",
202 salary: "$132",
203 },
204 {
205 name: "Dai Rios",
206 position: "Personnel Lead",
207 office: "Edinburgh",
208 age: "35",
209 date: "2012/09/26",
210 salary: "$217",
211 },
212 {
213 name: "Jenette Caldwell",
214 position: "Development Lead",
215 office: "New York",
216 age: "30",
217 date: "2011/09/03",
218 salary: "$345",
219 },
220 {
221 name: "Yuri Berry",
222 position: "Chief Marketing Officer (CMO)",
223 office: "New York",
224 age: "40",
225 date: "2009/06/25",
226 salary: "$675",
227 },
228 {
229 name: "Caesar Vance",
230 position: "Pre-Sales Support",
231 office: "New York",
232 age: "21",
233 date: "2011/12/12",
234 salary: "$106",
235 },
236 {
237 name: "Doris Wilder",
238 position: "Sales Assistant",
239 office: "Sidney",
240 age: "23",
241 date: "2010/09/20",
242 salary: "$85",
243 },
244 {
245 name: "Angelica Ramos",
246 position: "Chief Executive Officer (CEO)",
247 office: "London",
248 age: "47",
249 date: "2009/10/09",
250 salary: "$1",
251 },
252 {
253 name: "Gavin Joyce",
254 position: "Developer",
255 office: "Edinburgh",
256 age: "42",
257 date: "2010/12/22",
258 salary: "$92",
259 },
260 {
261 name: "Jennifer Chang",
262 position: "Regional Director",
263 office: "Singapore",
264 age: "28",
265 date: "2010/11/14",
266 salary: "$357",
267 },
268 {
269 name: "Brenden Wagner",
270 position: "Software Engineer",
271 office: "San Francisco",
272 age: "28",
273 date: "2011/06/07",
274 salary: "$206",
275 },
276 {
277 name: "Fiona Green",
278 position: "Chief Operating Officer (COO)",
279 office: "San Francisco",
280 age: "48",
281 date: "2010/03/11",
282 salary: "$850",
283 },
284 {
285 name: "Shou Itou",
286 position: "Regional Marketing",
287 office: "Tokyo",
288 age: "20",
289 date: "2011/08/14",
290 salary: "$163",
291 },
292 {
293 name: "Michelle House",
294 position: "Integration Specialist",
295 office: "Sidney",
296 age: "37",
297 date: "2011/06/02",
298 salary: "$95",
299 },
300 {
301 name: "Suki Burks",
302 position: "Developer",
303 office: "London",
304 age: "53",
305 date: "2009/10/22",
306 salary: "$114",
307 },
308 {
309 name: "Prescott Bartlett",
310 position: "Technical Author",
311 office: "London",
312 age: "27",
313 date: "2011/05/07",
314 salary: "$145",
315 },
316
317 {
318 name: "Donna Snider",
319 position: "Customer Support",
320 office: "New York",
321 age: "27",
322 date: "2011/01/25",
323 salary: "$112",
324 },
325 ],
326 }); };
327 return (
328 <CDBContainer>
329 <CDBCard>
330 <CDBCardBody>
331 <CDBDataTable
332 striped
333 bordered
334 hover
335 data={data()}
336 searching={false}
337 />
338 </CDBCardBody>
339 </CDBCard>
340 </CDBContainer>
341 );
342};
343
344export default DataTable;

No Sort

React Bootstrap No Sort DataTable

1import React from "react";
2import { CDBCard, CDBCardBody, CDBDataTable, CDBRow, CDBCol, CDBContainer } from "cdbreact";
3
4const DataTable = () => {
5
6 function testClickEvent(param) {
7 alert("Row Click Event");
8 }
9
10 const data = () =>{ return ({
11 columns: [
12 {
13 label: "Name",
14 field: "name",
15 width: 150,
16 attributes: {
17 "aria-controls": "DataTable",
18 "aria-label": "Name",
19 },
20 },
21 {
22 label: "Position",
23 field: "position",
24 width: 270,
25 },
26 {
27 label: "Office",
28 field: "office",
29 width: 200,
30 },
31 {
32 label: "Age",
33 field: "age",
34 sort: "asc",
35 width: 100,
36 },
37 {
38 label: "Start date",
39 field: "date",
40 sort: "disabled",
41 width: 150,
42 },
43 {
44 label: "Salary",
45 field: "salary",
46 sort: "disabled",
47 width: 100,
48 },
49 ],
50 rows: [
51 {
52 name: "Tiger Nixon",
53 position: "System Architect",
54 office: "Edinburgh",
55 age: "61",
56 date: "2011/04/25",
57 salary: "$320",
58 clickEvent: () => testClickEvent(1),
59 },
60 {
61 name: "Garrett Winters",
62 position: "Accountant",
63 office: "Tokyo",
64 age: "63",
65 date: "2011/07/25",
66 salary: "$170",
67 },
68 {
69 name: "Ashton Cox",
70 position: "Junior Technical Author",
71 office: "San Francisco",
72 age: "66",
73 date: "2009/01/12",
74 salary: "$86",
75 },
76 {
77 name: "Cedric Kelly",
78 position: "Senior Javascript Developer",
79 office: "Edinburgh",
80 age: "22",
81 date: "2012/03/29",
82 salary: "$433",
83 },
84 {
85 name: "Airi Satou",
86 position: "Accountant",
87 office: "Tokyo",
88 age: "33",
89 date: "2008/11/28",
90 salary: "$162",
91 },
92 {
93 name: "Brielle Williamson",
94 position: "Integration Specialist",
95 office: "New York",
96 age: "61",
97 date: "2012/12/02",
98 salary: "$372",
99 },
100 {
101 name: "Herrod Chandler",
102 position: "Sales Assistant",
103 office: "San Francisco",
104 age: "59",
105 date: "2012/08/06",
106 salary: "$137",
107 },
108 {
109 name: "Rhona Davidson",
110 position: "Integration Specialist",
111 office: "Tokyo",
112 age: "55",
113 date: "2010/10/14",
114 salary: "$327",
115 },
116 {
117 name: "Colleen Hurst",
118 position: "Javascript Developer",
119 office: "San Francisco",
120 age: "39",
121 date: "2009/09/15",
122 salary: "$205",
123 },
124 {
125 name: "Sonya Frost",
126 position: "Software Engineer",
127 office: "Edinburgh",
128 age: "23",
129 date: "2008/12/13",
130 salary: "$103",
131 },
132 {
133 name: "Jena Gaines",
134 position: "Office Manager",
135 office: "London",
136 age: "30",
137 date: "2008/12/19",
138 salary: "$90",
139 },
140 {
141 name: "Quinn Flynn",
142 position: "Support Lead",
143 office: "Edinburgh",
144 age: "22",
145 date: "2013/03/03",
146 salary: "$342",
147 },
148 {
149 name: "Charde Marshall",
150 position: "Regional Director",
151 office: "San Francisco",
152 age: "36",
153 date: "2008/10/16",
154 salary: "$470",
155 },
156 {
157 name: "Haley Kennedy",
158 position: "Senior Marketing Designer",
159 office: "London",
160 age: "43",
161 date: "2012/12/18",
162 salary: "$313",
163 },
164 {
165 name: "Tatyana Fitzpatrick",
166 position: "Regional Director",
167 office: "London",
168 age: "19",
169 date: "2010/03/17",
170 salary: "$385",
171 },
172 {
173 name: "Michael Silva",
174 position: "Marketing Designer",
175 office: "London",
176 age: "66",
177 date: "2012/11/27",
178 salary: "$198",
179 },
180 {
181 name: "Paul Byrd",
182 position: "Chief Financial Officer (CFO)",
183 office: "New York",
184 age: "64",
185 date: "2010/06/09",
186 salary: "$725",
187 },
188 {
189 name: "Gloria Little",
190 position: "Systems Administrator",
191 office: "New York",
192 age: "59",
193 date: "2009/04/10",
194 salary: "$237",
195 },
196 {
197 name: "Bradley Greer",
198 position: "Software Engineer",
199 office: "London",
200 age: "41",
201 date: "2012/10/13",
202 salary: "$132",
203 },
204 {
205 name: "Dai Rios",
206 position: "Personnel Lead",
207 office: "Edinburgh",
208 age: "35",
209 date: "2012/09/26",
210 salary: "$217",
211 },
212 {
213 name: "Jenette Caldwell",
214 position: "Development Lead",
215 office: "New York",
216 age: "30",
217 date: "2011/09/03",
218 salary: "$345",
219 },
220 {
221 name: "Yuri Berry",
222 position: "Chief Marketing Officer (CMO)",
223 office: "New York",
224 age: "40",
225 date: "2009/06/25",
226 salary: "$675",
227 },
228 {
229 name: "Caesar Vance",
230 position: "Pre-Sales Support",
231 office: "New York",
232 age: "21",
233 date: "2011/12/12",
234 salary: "$106",
235 },
236 {
237 name: "Doris Wilder",
238 position: "Sales Assistant",
239 office: "Sidney",
240 age: "23",
241 date: "2010/09/20",
242 salary: "$85",
243 },
244 {
245 name: "Angelica Ramos",
246 position: "Chief Executive Officer (CEO)",
247 office: "London",
248 age: "47",
249 date: "2009/10/09",
250 salary: "$1",
251 },
252 {
253 name: "Gavin Joyce",
254 position: "Developer",
255 office: "Edinburgh",
256 age: "42",
257 date: "2010/12/22",
258 salary: "$92",
259 },
260 {
261 name: "Jennifer Chang",
262 position: "Regional Director",
263 office: "Singapore",
264 age: "28",
265 date: "2010/11/14",
266 salary: "$357",
267 },
268 {
269 name: "Brenden Wagner",
270 position: "Software Engineer",
271 office: "San Francisco",
272 age: "28",
273 date: "2011/06/07",
274 salary: "$206",
275 },
276 {
277 name: "Fiona Green",
278 position: "Chief Operating Officer (COO)",
279 office: "San Francisco",
280 age: "48",
281 date: "2010/03/11",
282 salary: "$850",
283 },
284 {
285 name: "Shou Itou",
286 position: "Regional Marketing",
287 office: "Tokyo",
288 age: "20",
289 date: "2011/08/14",
290 salary: "$163",
291 },
292 {
293 name: "Michelle House",
294 position: "Integration Specialist",
295 office: "Sidney",
296 age: "37",
297 date: "2011/06/02",
298 salary: "$95",
299 },
300 {
301 name: "Suki Burks",
302 position: "Developer",
303 office: "London",
304 age: "53",
305 date: "2009/10/22",
306 salary: "$114",
307 },
308 {
309 name: "Prescott Bartlett",
310 position: "Technical Author",
311 office: "London",
312 age: "27",
313 date: "2011/05/07",
314 salary: "$145",
315 },
316
317 {
318 name: "Donna Snider",
319 position: "Customer Support",
320 office: "New York",
321 age: "27",
322 date: "2011/01/25",
323 salary: "$112",
324 },
325 ],
326 }); };
327 return (
328 <CDBContainer>
329 <CDBCard>
330 <CDBCardBody>
331 <CDBDataTable
332 striped
333 bordered
334 hover
335 data={data()}
336 sortable={false}
337 materialSearch
338 />
339 </CDBCardBody>
340 </CDBCard>
341 </CDBContainer>
342 );
343};
344
345export default DataTable;

No Info

React Bootstrap No Info

1import React from "react";
2import { CDBCard, CDBCardBody, CDBDataTable, CDBContainer } from "cdbreact";
3
4const DataTable = () => {
5
6 function testClickEvent(param) {
7 alert("Row Click Event");
8 }
9
10 const data = () =>{ return ({
11 columns: [
12 {
13 label: "Name",
14 field: "name",
15 width: 150,
16 attributes: {
17 "aria-controls": "DataTable",
18 "aria-label": "Name",
19 },
20 },
21 {
22 label: "Position",
23 field: "position",
24 width: 270,
25 },
26 {
27 label: "Office",
28 field: "office",
29 width: 200,
30 },
31 {
32 label: "Age",
33 field: "age",
34 sort: "asc",
35 width: 100,
36 },
37 {
38 label: "Start date",
39 field: "date",
40 sort: "disabled",
41 width: 150,
42 },
43 {
44 label: "Salary",
45 field: "salary",
46 sort: "disabled",
47 width: 100,
48 },
49 ],
50 rows: [
51 {
52 name: "Tiger Nixon",
53 position: "System Architect",
54 office: "Edinburgh",
55 age: "61",
56 date: "2011/04/25",
57 salary: "$320",
58 clickEvent: () => testClickEvent(1),
59 },
60 {
61 name: "Garrett Winters",
62 position: "Accountant",
63 office: "Tokyo",
64 age: "63",
65 date: "2011/07/25",
66 salary: "$170",
67 },
68 {
69 name: "Ashton Cox",
70 position: "Junior Technical Author",
71 office: "San Francisco",
72 age: "66",
73 date: "2009/01/12",
74 salary: "$86",
75 },
76 {
77 name: "Cedric Kelly",
78 position: "Senior Javascript Developer",
79 office: "Edinburgh",
80 age: "22",
81 date: "2012/03/29",
82 salary: "$433",
83 },
84 {
85 name: "Airi Satou",
86 position: "Accountant",
87 office: "Tokyo",
88 age: "33",
89 date: "2008/11/28",
90 salary: "$162",
91 },
92 {
93 name: "Brielle Williamson",
94 position: "Integration Specialist",
95 office: "New York",
96 age: "61",
97 date: "2012/12/02",
98 salary: "$372",
99 },
100 {
101 name: "Herrod Chandler",
102 position: "Sales Assistant",
103 office: "San Francisco",
104 age: "59",
105 date: "2012/08/06",
106 salary: "$137",
107 },
108 {
109 name: "Rhona Davidson",
110 position: "Integration Specialist",
111 office: "Tokyo",
112 age: "55",
113 date: "2010/10/14",
114 salary: "$327",
115 },
116 {
117 name: "Colleen Hurst",
118 position: "Javascript Developer",
119 office: "San Francisco",
120 age: "39",
121 date: "2009/09/15",
122 salary: "$205",
123 },
124 {
125 name: "Sonya Frost",
126 position: "Software Engineer",
127 office: "Edinburgh",
128 age: "23",
129 date: "2008/12/13",
130 salary: "$103",
131 },
132 {
133 name: "Jena Gaines",
134 position: "Office Manager",
135 office: "London",
136 age: "30",
137 date: "2008/12/19",
138 salary: "$90",
139 },
140 {
141 name: "Quinn Flynn",
142 position: "Support Lead",
143 office: "Edinburgh",
144 age: "22",
145 date: "2013/03/03",
146 salary: "$342",
147 },
148 {
149 name: "Charde Marshall",
150 position: "Regional Director",
151 office: "San Francisco",
152 age: "36",
153 date: "2008/10/16",
154 salary: "$470",
155 },
156 {
157 name: "Haley Kennedy",
158 position: "Senior Marketing Designer",
159 office: "London",
160 age: "43",
161 date: "2012/12/18",
162 salary: "$313",
163 },
164 {
165 name: "Tatyana Fitzpatrick",
166 position: "Regional Director",
167 office: "London",
168 age: "19",
169 date: "2010/03/17",
170 salary: "$385",
171 },
172 {
173 name: "Michael Silva",
174 position: "Marketing Designer",
175 office: "London",
176 age: "66",
177 date: "2012/11/27",
178 salary: "$198",
179 },
180 {
181 name: "Paul Byrd",
182 position: "Chief Financial Officer (CFO)",
183 office: "New York",
184 age: "64",
185 date: "2010/06/09",
186 salary: "$725",
187 },
188 {
189 name: "Gloria Little",
190 position: "Systems Administrator",
191 office: "New York",
192 age: "59",
193 date: "2009/04/10",
194 salary: "$237",
195 },
196 {
197 name: "Bradley Greer",
198 position: "Software Engineer",
199 office: "London",
200 age: "41",
201 date: "2012/10/13",
202 salary: "$132",
203 },
204 {
205 name: "Dai Rios",
206 position: "Personnel Lead",
207 office: "Edinburgh",
208 age: "35",
209 date: "2012/09/26",
210 salary: "$217",
211 },
212 {
213 name: "Jenette Caldwell",
214 position: "Development Lead",
215 office: "New York",
216 age: "30",
217 date: "2011/09/03",
218 salary: "$345",
219 },
220 {
221 name: "Yuri Berry",
222 position: "Chief Marketing Officer (CMO)",
223 office: "New York",
224 age: "40",
225 date: "2009/06/25",
226 salary: "$675",
227 },
228 {
229 name: "Caesar Vance",
230 position: "Pre-Sales Support",
231 office: "New York",
232 age: "21",
233 date: "2011/12/12",
234 salary: "$106",
235 },
236 {
237 name: "Doris Wilder",
238 position: "Sales Assistant",
239 office: "Sidney",
240 age: "23",
241 date: "2010/09/20",
242 salary: "$85",
243 },
244 {
245 name: "Angelica Ramos",
246 position: "Chief Executive Officer (CEO)",
247 office: "London",
248 age: "47",
249 date: "2009/10/09",
250 salary: "$1",
251 },
252 {
253 name: "Gavin Joyce",
254 position: "Developer",
255 office: "Edinburgh",
256 age: "42",
257 date: "2010/12/22",
258 salary: "$92",
259 },
260 {
261 name: "Jennifer Chang",
262 position: "Regional Director",
263 office: "Singapore",
264 age: "28",
265 date: "2010/11/14",
266 salary: "$357",
267 },
268 {
269 name: "Brenden Wagner",
270 position: "Software Engineer",
271 office: "San Francisco",
272 age: "28",
273 date: "2011/06/07",
274 salary: "$206",
275 },
276 {
277 name: "Fiona Green",
278 position: "Chief Operating Officer (COO)",
279 office: "San Francisco",
280 age: "48",
281 date: "2010/03/11",
282 salary: "$850",
283 },
284 {
285 name: "Shou Itou",
286 position: "Regional Marketing",
287 office: "Tokyo",
288 age: "20",
289 date: "2011/08/14",
290 salary: "$163",
291 },
292 {
293 name: "Michelle House",
294 position: "Integration Specialist",
295 office: "Sidney",
296 age: "37",
297 date: "2011/06/02",
298 salary: "$95",
299 },
300 {
301 name: "Suki Burks",
302 position: "Developer",
303 office: "London",
304 age: "53",
305 date: "2009/10/22",
306 salary: "$114",
307 },
308 {
309 name: "Prescott Bartlett",
310 position: "Technical Author",
311 office: "London",
312 age: "27",
313 date: "2011/05/07",
314 salary: "$145",
315 },
316
317 {
318 name: "Donna Snider",
319 position: "Customer Support",
320 office: "New York",
321 age: "27",
322 date: "2011/01/25",
323 salary: "$112",
324 },
325 ],
326 }); };
327 return (
328 <CDBContainer>
329 <CDBCard>
330 <CDBCardBody>
331 <CDBDataTable
332 striped
333 bordered
334 hover
335 data={data()}
336 info={false}
337 materialSearch
338 />
339 </CDBCardBody>
340 </CDBCard>
341 </CDBContainer>
342 );
343};
344
345export default DataTable;

No Pagination

React Bootstrap DataTable No Pagination

1import React from "react";
2import { CDBCard, CDBCardBody, CDBDataTable, CDBRow, CDBCol, CDBContainer } from "cdbreact";
3
4const DataTable = () => {
5
6 function testClickEvent(param) {
7 alert("Row Click Event");
8 }
9
10 const data = () =>{ return ({
11 columns: [
12 {
13 label: "Name",
14 field: "name",
15 width: 150,
16 attributes: {
17 "aria-controls": "DataTable",
18 "aria-label": "Name",
19 },
20 },
21 {
22 label: "Position",
23 field: "position",
24 width: 270,
25 },
26 {
27 label: "Office",
28 field: "office",
29 width: 200,
30 },
31 {
32 label: "Age",
33 field: "age",
34 sort: "asc",
35 width: 100,
36 },
37 {
38 label: "Start date",
39 field: "date",
40 sort: "disabled",
41 width: 150,
42 },
43 {
44 label: "Salary",
45 field: "salary",
46 sort: "disabled",
47 width: 100,
48 },
49 ],
50 rows: [
51 {
52 name: "Tiger Nixon",
53 position: "System Architect",
54 office: "Edinburgh",
55 age: "61",
56 date: "2011/04/25",
57 salary: "$320",
58 clickEvent: () => testClickEvent(1),
59 },
60 {
61 name: "Garrett Winters",
62 position: "Accountant",
63 office: "Tokyo",
64 age: "63",
65 date: "2011/07/25",
66 salary: "$170",
67 },
68 {
69 name: "Ashton Cox",
70 position: "Junior Technical Author",
71 office: "San Francisco",
72 age: "66",
73 date: "2009/01/12",
74 salary: "$86",
75 },
76 {
77 name: "Cedric Kelly",
78 position: "Senior Javascript Developer",
79 office: "Edinburgh",
80 age: "22",
81 date: "2012/03/29",
82 salary: "$433",
83 },
84 {
85 name: "Airi Satou",
86 position: "Accountant",
87 office: "Tokyo",
88 age: "33",
89 date: "2008/11/28",
90 salary: "$162",
91 },
92 {
93 name: "Brielle Williamson",
94 position: "Integration Specialist",
95 office: "New York",
96 age: "61",
97 date: "2012/12/02",
98 salary: "$372",
99 },
100 {
101 name: "Herrod Chandler",
102 position: "Sales Assistant",
103 office: "San Francisco",
104 age: "59",
105 date: "2012/08/06",
106 salary: "$137",
107 },
108 {
109 name: "Rhona Davidson",
110 position: "Integration Specialist",
111 office: "Tokyo",
112 age: "55",
113 date: "2010/10/14",
114 salary: "$327",
115 },
116 {