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.

1
import { CDBDataTable } from "cdbreact";

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

Default DataTable

1
import React from "react";
2
import { CDBCard, CDBCardBody, CDBDataTable, CDBContainer } from "cdbreact";
3
4
const 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
347
export default DataTable;

Not Striped

1
import React from "react";
2
import { CDBCard, CDBCardBody, CDBDataTable,  CDBContainer } from "cdbreact";
3
4
const 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
346
export default DataTable;

Fixed Height

1
import React from "react";
2
import { CDBCard, CDBCardBody, CDBDataTable, CDBRow, CDBCol, CDBContainer } from "cdbreact";
3
4
const 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
346
export default DataTable;

Disabled Button

1
import React from "react";
2
import { CDBCard, CDBCardBody, CDBDataTable, CDBRow, CDBCol, CDBContainer } from "cdbreact";
3
4
const 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
345
export default DataTable;

Full Pagination

1
import React from "react";
2
import { CDBCard, CDBCardBody, CDBDataTable, CDBRow, CDBCol, CDBContainer } from "cdbreact";
3
4
const 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
348
export default DataTable;