How to use cell method in pom

Best Python code snippet using pom_python

Tables.js

Source: Tables.js Github

copy

Full Screen

1import React from 'react'2import {3 CCard,4 CCardBody,5 CCardHeader,6 CCol,7 CRow,8 CTable,9 CTableBody,10 CTableCaption,11 CTableDataCell,12 CTableHead,13 CTableHeaderCell,14 CTableRow,15} from '@coreui/​react'16import { DocsCallout, DocsExample } from 'src/​components'17const Tables = () => {18 return (19 <CRow>20 <CCol xs={12}>21 <DocsCallout name="Table" href="components/​table" /​>22 </​CCol>23 <CCol xs={12}>24 <CCard className="mb-4">25 <CCardHeader>26 <strong>React Table</​strong> <small>Basic example</​small>27 </​CCardHeader>28 <CCardBody>29 <p className="text-medium-emphasis small">30 Using the most basic table CoreUI, here&#39;s how <code>&lt;CTable&gt;</​code>-based31 tables look in CoreUI.32 </​p>33 <DocsExample href="components/​table">34 <CTable>35 <CTableHead>36 <CTableRow>37 <CTableHeaderCell scope="col">#</​CTableHeaderCell>38 <CTableHeaderCell scope="col">Class</​CTableHeaderCell>39 <CTableHeaderCell scope="col">Heading</​CTableHeaderCell>40 <CTableHeaderCell scope="col">Heading</​CTableHeaderCell>41 </​CTableRow>42 </​CTableHead>43 <CTableBody>44 <CTableRow>45 <CTableHeaderCell scope="row">1</​CTableHeaderCell>46 <CTableDataCell>Mark</​CTableDataCell>47 <CTableDataCell>Otto</​CTableDataCell>48 <CTableDataCell>@mdo</​CTableDataCell>49 </​CTableRow>50 <CTableRow>51 <CTableHeaderCell scope="row">2</​CTableHeaderCell>52 <CTableDataCell>Jacob</​CTableDataCell>53 <CTableDataCell>Thornton</​CTableDataCell>54 <CTableDataCell>@fat</​CTableDataCell>55 </​CTableRow>56 <CTableRow>57 <CTableHeaderCell scope="row">3</​CTableHeaderCell>58 <CTableDataCell colSpan="2">Larry the Bird</​CTableDataCell>59 <CTableDataCell>@twitter</​CTableDataCell>60 </​CTableRow>61 </​CTableBody>62 </​CTable>63 </​DocsExample>64 </​CCardBody>65 </​CCard>66 </​CCol>67 <CCol xs={12}>68 <CCard className="mb-4">69 <CCardHeader>70 <strong>React Table</​strong> <small>Variants</​small>71 </​CCardHeader>72 <CCardBody>73 <p className="text-medium-emphasis small">74 Use contextual classes to color tables, table rows or individual cells.75 </​p>76 <DocsExample href="components/​table#variants">77 <CTable>78 <CTableHead>79 <CTableRow>80 <CTableHeaderCell scope="col">Class</​CTableHeaderCell>81 <CTableHeaderCell scope="col">Heading</​CTableHeaderCell>82 <CTableHeaderCell scope="col">Heading</​CTableHeaderCell>83 </​CTableRow>84 </​CTableHead>85 <CTableBody>86 <CTableRow>87 <CTableHeaderCell scope="row">Default</​CTableHeaderCell>88 <CTableDataCell>Cell</​CTableDataCell>89 <CTableDataCell>Cell</​CTableDataCell>90 </​CTableRow>91 <CTableRow color="primary">92 <CTableHeaderCell scope="row">Primary</​CTableHeaderCell>93 <CTableDataCell>Cell</​CTableDataCell>94 <CTableDataCell>Cell</​CTableDataCell>95 </​CTableRow>96 <CTableRow color="secondary">97 <CTableHeaderCell scope="row">Secondary</​CTableHeaderCell>98 <CTableDataCell>Cell</​CTableDataCell>99 <CTableDataCell>Cell</​CTableDataCell>100 </​CTableRow>101 <CTableRow color="success">102 <CTableHeaderCell scope="row">Success</​CTableHeaderCell>103 <CTableDataCell>Cell</​CTableDataCell>104 <CTableDataCell>Cell</​CTableDataCell>105 </​CTableRow>106 <CTableRow color="danger">107 <CTableHeaderCell scope="row">Danger</​CTableHeaderCell>108 <CTableDataCell>Cell</​CTableDataCell>109 <CTableDataCell>Cell</​CTableDataCell>110 </​CTableRow>111 <CTableRow color="warning">112 <CTableHeaderCell scope="row">Warning</​CTableHeaderCell>113 <CTableDataCell>Cell</​CTableDataCell>114 <CTableDataCell>Cell</​CTableDataCell>115 </​CTableRow>116 <CTableRow color="info">117 <CTableHeaderCell scope="row">Info</​CTableHeaderCell>118 <CTableDataCell>Cell</​CTableDataCell>119 <CTableDataCell>Cell</​CTableDataCell>120 </​CTableRow>121 <CTableRow color="light">122 <CTableHeaderCell scope="row">Light</​CTableHeaderCell>123 <CTableDataCell>Cell</​CTableDataCell>124 <CTableDataCell>Cell</​CTableDataCell>125 </​CTableRow>126 <CTableRow color="dark">127 <CTableHeaderCell scope="row">Dark</​CTableHeaderCell>128 <CTableDataCell>Cell</​CTableDataCell>129 <CTableDataCell>Cell</​CTableDataCell>130 </​CTableRow>131 </​CTableBody>132 </​CTable>133 </​DocsExample>134 </​CCardBody>135 </​CCard>136 </​CCol>137 <CCol xs={12}>138 <CCard className="mb-4">139 <CCardHeader>140 <strong>React Table</​strong> <small>Striped rows</​small>141 </​CCardHeader>142 <CCardBody>143 <p className="text-medium-emphasis small">144 Use <code>striped</​code> property to add zebra-striping to any table row within the{' '}145 <code>&lt;CTableBody&gt;</​code>.146 </​p>147 <DocsExample href="components/​table#striped-rows">148 <CTable striped>149 <CTableHead>150 <CTableRow>151 <CTableHeaderCell scope="col">#</​CTableHeaderCell>152 <CTableHeaderCell scope="col">Class</​CTableHeaderCell>153 <CTableHeaderCell scope="col">Heading</​CTableHeaderCell>154 <CTableHeaderCell scope="col">Heading</​CTableHeaderCell>155 </​CTableRow>156 </​CTableHead>157 <CTableBody>158 <CTableRow>159 <CTableHeaderCell scope="row">1</​CTableHeaderCell>160 <CTableDataCell>Mark</​CTableDataCell>161 <CTableDataCell>Otto</​CTableDataCell>162 <CTableDataCell>@mdo</​CTableDataCell>163 </​CTableRow>164 <CTableRow>165 <CTableHeaderCell scope="row">2</​CTableHeaderCell>166 <CTableDataCell>Jacob</​CTableDataCell>167 <CTableDataCell>Thornton</​CTableDataCell>168 <CTableDataCell>@fat</​CTableDataCell>169 </​CTableRow>170 <CTableRow>171 <CTableHeaderCell scope="row">3</​CTableHeaderCell>172 <CTableDataCell colSpan="2">Larry the Bird</​CTableDataCell>173 <CTableDataCell>@twitter</​CTableDataCell>174 </​CTableRow>175 </​CTableBody>176 </​CTable>177 </​DocsExample>178 <p className="text-medium-emphasis small">179 These classes can also be added to table variants:180 </​p>181 <DocsExample href="components/​table#striped-rows">182 <CTable color="dark" striped>183 <CTableHead>184 <CTableRow>185 <CTableHeaderCell scope="col">#</​CTableHeaderCell>186 <CTableHeaderCell scope="col">Class</​CTableHeaderCell>187 <CTableHeaderCell scope="col">Heading</​CTableHeaderCell>188 <CTableHeaderCell scope="col">Heading</​CTableHeaderCell>189 </​CTableRow>190 </​CTableHead>191 <CTableBody>192 <CTableRow>193 <CTableHeaderCell scope="row">1</​CTableHeaderCell>194 <CTableDataCell>Mark</​CTableDataCell>195 <CTableDataCell>Otto</​CTableDataCell>196 <CTableDataCell>@mdo</​CTableDataCell>197 </​CTableRow>198 <CTableRow>199 <CTableHeaderCell scope="row">2</​CTableHeaderCell>200 <CTableDataCell>Jacob</​CTableDataCell>201 <CTableDataCell>Thornton</​CTableDataCell>202 <CTableDataCell>@fat</​CTableDataCell>203 </​CTableRow>204 <CTableRow>205 <CTableHeaderCell scope="row">3</​CTableHeaderCell>206 <CTableDataCell colSpan="2">Larry the Bird</​CTableDataCell>207 <CTableDataCell>@twitter</​CTableDataCell>208 </​CTableRow>209 </​CTableBody>210 </​CTable>211 </​DocsExample>212 <DocsExample href="components/​table#striped-rows">213 <CTable color="success" striped>214 <CTableHead>215 <CTableRow>216 <CTableHeaderCell scope="col">#</​CTableHeaderCell>217 <CTableHeaderCell scope="col">Class</​CTableHeaderCell>218 <CTableHeaderCell scope="col">Heading</​CTableHeaderCell>219 <CTableHeaderCell scope="col">Heading</​CTableHeaderCell>220 </​CTableRow>221 </​CTableHead>222 <CTableBody>223 <CTableRow>224 <CTableHeaderCell scope="row">1</​CTableHeaderCell>225 <CTableDataCell>Mark</​CTableDataCell>226 <CTableDataCell>Otto</​CTableDataCell>227 <CTableDataCell>@mdo</​CTableDataCell>228 </​CTableRow>229 <CTableRow>230 <CTableHeaderCell scope="row">2</​CTableHeaderCell>231 <CTableDataCell>Jacob</​CTableDataCell>232 <CTableDataCell>Thornton</​CTableDataCell>233 <CTableDataCell>@fat</​CTableDataCell>234 </​CTableRow>235 <CTableRow>236 <CTableHeaderCell scope="row">3</​CTableHeaderCell>237 <CTableDataCell colSpan="2">Larry the Bird</​CTableDataCell>238 <CTableDataCell>@twitter</​CTableDataCell>239 </​CTableRow>240 </​CTableBody>241 </​CTable>242 </​DocsExample>243 </​CCardBody>244 </​CCard>245 </​CCol>246 <CCol xs={12}>247 <CCard className="mb-4">248 <CCardHeader>249 <strong>React Table</​strong> <small>Hoverable rows</​small>250 </​CCardHeader>251 <CCardBody>252 <p className="text-medium-emphasis small">253 Use <code>hover</​code> property to enable a hover state on table rows within a{' '}254 <code>&lt;CTableBody&gt;</​code>.255 </​p>256 <DocsExample href="components/​table#hoverable-rows">257 <CTable hover>258 <CTableHead>259 <CTableRow>260 <CTableHeaderCell scope="col">#</​CTableHeaderCell>261 <CTableHeaderCell scope="col">Class</​CTableHeaderCell>262 <CTableHeaderCell scope="col">Heading</​CTableHeaderCell>263 <CTableHeaderCell scope="col">Heading</​CTableHeaderCell>264 </​CTableRow>265 </​CTableHead>266 <CTableBody>267 <CTableRow>268 <CTableHeaderCell scope="row">1</​CTableHeaderCell>269 <CTableDataCell>Mark</​CTableDataCell>270 <CTableDataCell>Otto</​CTableDataCell>271 <CTableDataCell>@mdo</​CTableDataCell>272 </​CTableRow>273 <CTableRow>274 <CTableHeaderCell scope="row">2</​CTableHeaderCell>275 <CTableDataCell>Jacob</​CTableDataCell>276 <CTableDataCell>Thornton</​CTableDataCell>277 <CTableDataCell>@fat</​CTableDataCell>278 </​CTableRow>279 <CTableRow>280 <CTableHeaderCell scope="row">3</​CTableHeaderCell>281 <CTableDataCell colSpan="2">Larry the Bird</​CTableDataCell>282 <CTableDataCell>@twitter</​CTableDataCell>283 </​CTableRow>284 </​CTableBody>285 </​CTable>286 </​DocsExample>287 <DocsExample href="components/​table#hoverable-rows">288 <CTable color="dark" hover>289 <CTableHead>290 <CTableRow>291 <CTableHeaderCell scope="col">#</​CTableHeaderCell>292 <CTableHeaderCell scope="col">Class</​CTableHeaderCell>293 <CTableHeaderCell scope="col">Heading</​CTableHeaderCell>294 <CTableHeaderCell scope="col">Heading</​CTableHeaderCell>295 </​CTableRow>296 </​CTableHead>297 <CTableBody>298 <CTableRow>299 <CTableHeaderCell scope="row">1</​CTableHeaderCell>300 <CTableDataCell>Mark</​CTableDataCell>301 <CTableDataCell>Otto</​CTableDataCell>302 <CTableDataCell>@mdo</​CTableDataCell>303 </​CTableRow>304 <CTableRow>305 <CTableHeaderCell scope="row">2</​CTableHeaderCell>306 <CTableDataCell>Jacob</​CTableDataCell>307 <CTableDataCell>Thornton</​CTableDataCell>308 <CTableDataCell>@fat</​CTableDataCell>309 </​CTableRow>310 <CTableRow>311 <CTableHeaderCell scope="row">3</​CTableHeaderCell>312 <CTableDataCell colSpan="2">Larry the Bird</​CTableDataCell>313 <CTableDataCell>@twitter</​CTableDataCell>314 </​CTableRow>315 </​CTableBody>316 </​CTable>317 </​DocsExample>318 <DocsExample href="components/​table#hoverable-rows">319 <CTable striped hover>320 <CTableHead>321 <CTableRow>322 <CTableHeaderCell scope="col">#</​CTableHeaderCell>323 <CTableHeaderCell scope="col">Class</​CTableHeaderCell>324 <CTableHeaderCell scope="col">Heading</​CTableHeaderCell>325 <CTableHeaderCell scope="col">Heading</​CTableHeaderCell>326 </​CTableRow>327 </​CTableHead>328 <CTableBody>329 <CTableRow>330 <CTableHeaderCell scope="row">1</​CTableHeaderCell>331 <CTableDataCell>Mark</​CTableDataCell>332 <CTableDataCell>Otto</​CTableDataCell>333 <CTableDataCell>@mdo</​CTableDataCell>334 </​CTableRow>335 <CTableRow>336 <CTableHeaderCell scope="row">2</​CTableHeaderCell>337 <CTableDataCell>Jacob</​CTableDataCell>338 <CTableDataCell>Thornton</​CTableDataCell>339 <CTableDataCell>@fat</​CTableDataCell>340 </​CTableRow>341 <CTableRow>342 <CTableHeaderCell scope="row">3</​CTableHeaderCell>343 <CTableDataCell colSpan="2">Larry the Bird</​CTableDataCell>344 <CTableDataCell>@twitter</​CTableDataCell>345 </​CTableRow>346 </​CTableBody>347 </​CTable>348 </​DocsExample>349 </​CCardBody>350 </​CCard>351 </​CCol>352 <CCol xs={12}>353 <CCard className="mb-4">354 <CCardHeader>355 <strong>React Table</​strong> <small>Active tables</​small>356 </​CCardHeader>357 <CCardBody>358 <DocsExample href="components/​table#active-tables">359 <CTable>360 <CTableHead>361 <CTableRow>362 <CTableHeaderCell scope="col">#</​CTableHeaderCell>363 <CTableHeaderCell scope="col">Class</​CTableHeaderCell>364 <CTableHeaderCell scope="col">Heading</​CTableHeaderCell>365 <CTableHeaderCell scope="col">Heading</​CTableHeaderCell>366 </​CTableRow>367 </​CTableHead>368 <CTableBody>369 <CTableRow active>370 <CTableHeaderCell scope="row">1</​CTableHeaderCell>371 <CTableDataCell>Mark</​CTableDataCell>372 <CTableDataCell>Otto</​CTableDataCell>373 <CTableDataCell>@mdo</​CTableDataCell>374 </​CTableRow>375 <CTableRow>376 <CTableHeaderCell scope="row">2</​CTableHeaderCell>377 <CTableDataCell>Jacob</​CTableDataCell>378 <CTableDataCell>Thornton</​CTableDataCell>379 <CTableDataCell>@fat</​CTableDataCell>380 </​CTableRow>381 <CTableRow>382 <CTableHeaderCell scope="row">3</​CTableHeaderCell>383 <CTableDataCell colSpan="2" active>384 Larry the Bird385 </​CTableDataCell>386 <CTableDataCell>@twitter</​CTableDataCell>387 </​CTableRow>388 </​CTableBody>389 </​CTable>390 </​DocsExample>391 <DocsExample href="components/​table#active-tables">392 <CTable color="dark">393 <CTableHead>394 <CTableRow>395 <CTableHeaderCell scope="col">#</​CTableHeaderCell>396 <CTableHeaderCell scope="col">Class</​CTableHeaderCell>397 <CTableHeaderCell scope="col">Heading</​CTableHeaderCell>398 <CTableHeaderCell scope="col">Heading</​CTableHeaderCell>399 </​CTableRow>400 </​CTableHead>401 <CTableBody>402 <CTableRow active>403 <CTableHeaderCell scope="row">1</​CTableHeaderCell>404 <CTableDataCell>Mark</​CTableDataCell>405 <CTableDataCell>Otto</​CTableDataCell>406 <CTableDataCell>@mdo</​CTableDataCell>407 </​CTableRow>408 <CTableRow>409 <CTableHeaderCell scope="row">2</​CTableHeaderCell>410 <CTableDataCell>Jacob</​CTableDataCell>411 <CTableDataCell>Thornton</​CTableDataCell>412 <CTableDataCell>@fat</​CTableDataCell>413 </​CTableRow>414 <CTableRow>415 <CTableHeaderCell scope="row">3</​CTableHeaderCell>416 <CTableDataCell colSpan="2" active>417 Larry the Bird418 </​CTableDataCell>419 <CTableDataCell>@twitter</​CTableDataCell>420 </​CTableRow>421 </​CTableBody>422 </​CTable>423 </​DocsExample>424 </​CCardBody>425 </​CCard>426 </​CCol>427 <CCol xs={12}>428 <CCard className="mb-4">429 <CCardHeader>430 <strong>React Table</​strong> <small>Bordered tables</​small>431 </​CCardHeader>432 <CCardBody>433 <p className="text-medium-emphasis small">434 Add <code>bordered</​code> property for borders on all sides of the table and cells.435 </​p>436 <DocsExample href="components/​table#bordered-tables">437 <CTable bordered>438 <CTableHead>439 <CTableRow>440 <CTableHeaderCell scope="col">#</​CTableHeaderCell>441 <CTableHeaderCell scope="col">Class</​CTableHeaderCell>442 <CTableHeaderCell scope="col">Heading</​CTableHeaderCell>443 <CTableHeaderCell scope="col">Heading</​CTableHeaderCell>444 </​CTableRow>445 </​CTableHead>446 <CTableBody>447 <CTableRow>448 <CTableHeaderCell scope="row">1</​CTableHeaderCell>449 <CTableDataCell>Mark</​CTableDataCell>450 <CTableDataCell>Otto</​CTableDataCell>451 <CTableDataCell>@mdo</​CTableDataCell>452 </​CTableRow>453 <CTableRow>454 <CTableHeaderCell scope="row">2</​CTableHeaderCell>455 <CTableDataCell>Jacob</​CTableDataCell>456 <CTableDataCell>Thornton</​CTableDataCell>457 <CTableDataCell>@fat</​CTableDataCell>458 </​CTableRow>459 <CTableRow>460 <CTableHeaderCell scope="row">3</​CTableHeaderCell>461 <CTableDataCell colSpan="2">Larry the Bird</​CTableDataCell>462 <CTableDataCell>@twitter</​CTableDataCell>463 </​CTableRow>464 </​CTableBody>465 </​CTable>466 </​DocsExample>467 <p className="text-medium-emphasis small">468 <a href="https:/​/​coreui.io/​docs/​4.0/​utilities/​borders#border-color">469 Border color utilities470 </​a>{' '}471 can be added to change colors:472 </​p>473 <DocsExample href="components/​table#bordered-tables">474 <CTable bordered borderColor="primary">475 <CTableHead>476 <CTableRow>477 <CTableHeaderCell scope="col">#</​CTableHeaderCell>478 <CTableHeaderCell scope="col">Class</​CTableHeaderCell>479 <CTableHeaderCell scope="col">Heading</​CTableHeaderCell>480 <CTableHeaderCell scope="col">Heading</​CTableHeaderCell>481 </​CTableRow>482 </​CTableHead>483 <CTableBody>484 <CTableRow>485 <CTableHeaderCell scope="row">1</​CTableHeaderCell>486 <CTableDataCell>Mark</​CTableDataCell>487 <CTableDataCell>Otto</​CTableDataCell>488 <CTableDataCell>@mdo</​CTableDataCell>489 </​CTableRow>490 <CTableRow>491 <CTableHeaderCell scope="row">2</​CTableHeaderCell>492 <CTableDataCell>Jacob</​CTableDataCell>493 <CTableDataCell>Thornton</​CTableDataCell>494 <CTableDataCell>@fat</​CTableDataCell>495 </​CTableRow>496 <CTableRow>497 <CTableHeaderCell scope="row">3</​CTableHeaderCell>498 <CTableDataCell colSpan="2">Larry the Bird</​CTableDataCell>499 <CTableDataCell>@twitter</​CTableDataCell>500 </​CTableRow>501 </​CTableBody>502 </​CTable>503 </​DocsExample>504 </​CCardBody>505 </​CCard>506 </​CCol>507 <CCol xs={12}>508 <CCard className="mb-4">509 <CCardHeader>510 <strong>React Table</​strong> <small>Tables without borders</​small>511 </​CCardHeader>512 <CCardBody>513 <p className="text-medium-emphasis small">514 Add <code>borderless</​code> property for a table without borders.515 </​p>516 <DocsExample href="components/​table#tables-without-borders">517 <CTable borderless>518 <CTableHead>519 <CTableRow>520 <CTableHeaderCell scope="col">#</​CTableHeaderCell>521 <CTableHeaderCell scope="col">Class</​CTableHeaderCell>522 <CTableHeaderCell scope="col">Heading</​CTableHeaderCell>523 <CTableHeaderCell scope="col">Heading</​CTableHeaderCell>524 </​CTableRow>525 </​CTableHead>526 <CTableBody>527 <CTableRow>528 <CTableHeaderCell scope="row">1</​CTableHeaderCell>529 <CTableDataCell>Mark</​CTableDataCell>530 <CTableDataCell>Otto</​CTableDataCell>531 <CTableDataCell>@mdo</​CTableDataCell>532 </​CTableRow>533 <CTableRow>534 <CTableHeaderCell scope="row">2</​CTableHeaderCell>535 <CTableDataCell>Jacob</​CTableDataCell>536 <CTableDataCell>Thornton</​CTableDataCell>537 <CTableDataCell>@fat</​CTableDataCell>538 </​CTableRow>539 <CTableRow>540 <CTableHeaderCell scope="row">3</​CTableHeaderCell>541 <CTableDataCell colSpan="2">Larry the Bird</​CTableDataCell>542 <CTableDataCell>@twitter</​CTableDataCell>543 </​CTableRow>544 </​CTableBody>545 </​CTable>546 </​DocsExample>547 <DocsExample href="components/​table#tables-without-borders">548 <CTable color="dark" borderless>549 <CTableHead>550 <CTableRow>551 <CTableHeaderCell scope="col">#</​CTableHeaderCell>552 <CTableHeaderCell scope="col">Class</​CTableHeaderCell>553 <CTableHeaderCell scope="col">Heading</​CTableHeaderCell>554 <CTableHeaderCell scope="col">Heading</​CTableHeaderCell>555 </​CTableRow>556 </​CTableHead>557 <CTableBody>558 <CTableRow>559 <CTableHeaderCell scope="row">1</​CTableHeaderCell>560 <CTableDataCell>Mark</​CTableDataCell>561 <CTableDataCell>Otto</​CTableDataCell>562 <CTableDataCell>@mdo</​CTableDataCell>563 </​CTableRow>564 <CTableRow>565 <CTableHeaderCell scope="row">2</​CTableHeaderCell>566 <CTableDataCell>Jacob</​CTableDataCell>567 <CTableDataCell>Thornton</​CTableDataCell>568 <CTableDataCell>@fat</​CTableDataCell>569 </​CTableRow>570 <CTableRow>571 <CTableHeaderCell scope="row">3</​CTableHeaderCell>572 <CTableDataCell colSpan="2">Larry the Bird</​CTableDataCell>573 <CTableDataCell>@twitter</​CTableDataCell>574 </​CTableRow>575 </​CTableBody>576 </​CTable>577 </​DocsExample>578 </​CCardBody>579 </​CCard>580 </​CCol>581 <CCol xs={12}>582 <CCard className="mb-4">583 <CCardHeader>584 <strong>React Table</​strong> <small>Small tables</​small>585 </​CCardHeader>586 <CCardBody>587 <p className="text-medium-emphasis small">588 Add <code>small</​code> property to make any <code>&lt;CTable&gt;</​code> more compact589 by cutting all cell <code>padding</​code> in half.590 </​p>591 <DocsExample href="components/​table#small-tables">592 <CTable small>593 <CTableHead>594 <CTableRow>595 <CTableHeaderCell scope="col">#</​CTableHeaderCell>596 <CTableHeaderCell scope="col">Class</​CTableHeaderCell>597 <CTableHeaderCell scope="col">Heading</​CTableHeaderCell>598 <CTableHeaderCell scope="col">Heading</​CTableHeaderCell>599 </​CTableRow>600 </​CTableHead>601 <CTableBody>602 <CTableRow>603 <CTableHeaderCell scope="row">1</​CTableHeaderCell>604 <CTableDataCell>Mark</​CTableDataCell>605 <CTableDataCell>Otto</​CTableDataCell>606 <CTableDataCell>@mdo</​CTableDataCell>607 </​CTableRow>608 <CTableRow>609 <CTableHeaderCell scope="row">2</​CTableHeaderCell>610 <CTableDataCell>Jacob</​CTableDataCell>611 <CTableDataCell>Thornton</​CTableDataCell>612 <CTableDataCell>@fat</​CTableDataCell>613 </​CTableRow>614 <CTableRow>615 <CTableHeaderCell scope="row">3</​CTableHeaderCell>616 <CTableDataCell colSpan="2">Larry the Bird</​CTableDataCell>617 <CTableDataCell>@twitter</​CTableDataCell>618 </​CTableRow>619 </​CTableBody>620 </​CTable>621 </​DocsExample>622 </​CCardBody>623 </​CCard>624 </​CCol>625 <CCol xs={12}>626 <CCard className="mb-4">627 <CCardHeader>628 <strong>React Table</​strong> <small>Vertical alignment</​small>629 </​CCardHeader>630 <CCardBody>631 <p className="text-medium-emphasis small">632 Table cells of <code>&lt;CTableHead&gt;</​code> are always vertical aligned to the633 bottom. Table cells in <code>&lt;CTableBody&gt;</​code> inherit their alignment from{' '}634 <code>&lt;CTable&gt;</​code> and are aligned to the the top by default. Use the align635 property to re-align where needed.636 </​p>637 <DocsExample href="components/​table#vertical-alignment">638 <CTable align="middle" responsive>639 <CTableHead>640 <CTableRow>641 <CTableHeaderCell scope="col" className="w-25">642 Heading 1643 </​CTableHeaderCell>644 <CTableHeaderCell scope="col" className="w-25">645 Heading 2646 </​CTableHeaderCell>647 <CTableHeaderCell scope="col" className="w-25">648 Heading 3649 </​CTableHeaderCell>650 <CTableHeaderCell scope="col" className="w-25">651 Heading 4652 </​CTableHeaderCell>653 </​CTableRow>654 </​CTableHead>655 <CTableBody>656 <CTableRow>657 <CTableDataCell>658 This cell inherits <code>vertical-align: middle;</​code> from the table659 </​CTableDataCell>660 <CTableDataCell>661 This cell inherits <code>vertical-align: middle;</​code> from the table662 </​CTableDataCell>663 <CTableDataCell>664 This cell inherits <code>vertical-align: middle;</​code> from the table665 </​CTableDataCell>666 <CTableDataCell>667 This here is some placeholder text, intended to take up quite a bit of668 vertical space, to demonsCTableRowate how the vertical alignment works in the669 preceding cells.670 </​CTableDataCell>671 </​CTableRow>672 <CTableRow align="bottom">673 <CTableDataCell>674 This cell inherits <code>vertical-align: bottom;</​code> from the table row675 </​CTableDataCell>676 <CTableDataCell>677 This cell inherits <code>vertical-align: bottom;</​code> from the table row678 </​CTableDataCell>679 <CTableDataCell>680 This cell inherits <code>vertical-align: bottom;</​code> from the table row681 </​CTableDataCell>682 <CTableDataCell>683 This here is some placeholder text, intended to take up quite a bit of684 vertical space, to demonsCTableRowate how the vertical alignment works in the685 preceding cells.686 </​CTableDataCell>687 </​CTableRow>688 <CTableRow>689 <CTableDataCell>690 This cell inherits <code>vertical-align: middle;</​code> from the table691 </​CTableDataCell>692 <CTableDataCell>693 This cell inherits <code>vertical-align: middle;</​code> from the table694 </​CTableDataCell>695 <CTableDataCell align="top">This cell is aligned to the top.</​CTableDataCell>696 <CTableDataCell>697 This here is some placeholder text, intended to take up quite a bit of698 vertical space, to demonsCTableRowate how the vertical alignment works in the699 preceding cells.700 </​CTableDataCell>701 </​CTableRow>702 </​CTableBody>703 </​CTable>704 </​DocsExample>705 </​CCardBody>706 </​CCard>707 </​CCol>708 <CCol xs={12}>709 <CCard className="mb-4">710 <CCardHeader>711 <strong>React Table</​strong> <small>Nesting</​small>712 </​CCardHeader>713 <CCardBody>714 <p className="text-medium-emphasis small">715 Border styles, active styles, and table variants are not inherited by nested tables.716 </​p>717 <DocsExample href="components/​table#nesting">718 <CTable striped>719 <CTableHead>720 <CTableRow>721 <CTableHeaderCell scope="col">#</​CTableHeaderCell>722 <CTableHeaderCell scope="col">Class</​CTableHeaderCell>723 <CTableHeaderCell scope="col">Heading</​CTableHeaderCell>724 <CTableHeaderCell scope="col">Heading</​CTableHeaderCell>725 </​CTableRow>726 </​CTableHead>727 <CTableBody>728 <CTableRow>729 <CTableHeaderCell scope="row">1</​CTableHeaderCell>730 <CTableDataCell>Mark</​CTableDataCell>731 <CTableDataCell>Otto</​CTableDataCell>732 <CTableDataCell>@mdo</​CTableDataCell>733 </​CTableRow>734 <CTableRow>735 <CTableHeaderCell colSpan="4">736 <CTable>737 <CTableHead>738 <CTableRow>739 <CTableHeaderCell scope="col">Header</​CTableHeaderCell>740 <CTableHeaderCell scope="col">Header</​CTableHeaderCell>741 <CTableHeaderCell scope="col">Header</​CTableHeaderCell>742 </​CTableRow>743 </​CTableHead>744 <CTableBody>745 <CTableRow>746 <CTableHeaderCell scope="row">A</​CTableHeaderCell>747 <CTableDataCell>First</​CTableDataCell>748 <CTableDataCell>Last</​CTableDataCell>749 </​CTableRow>750 <CTableRow>751 <CTableHeaderCell scope="row">B</​CTableHeaderCell>752 <CTableDataCell>First</​CTableDataCell>753 <CTableDataCell>Last</​CTableDataCell>754 </​CTableRow>755 <CTableRow>756 <CTableHeaderCell scope="row">C</​CTableHeaderCell>757 <CTableDataCell>First</​CTableDataCell>758 <CTableDataCell>Last</​CTableDataCell>759 </​CTableRow>760 </​CTableBody>761 </​CTable>762 </​CTableHeaderCell>763 </​CTableRow>764 <CTableRow>765 <CTableHeaderCell scope="row">3</​CTableHeaderCell>766 <CTableDataCell colSpan="2">Larry the Bird</​CTableDataCell>767 <CTableDataCell>@twitter</​CTableDataCell>768 </​CTableRow>769 </​CTableBody>770 </​CTable>771 </​DocsExample>772 </​CCardBody>773 </​CCard>774 </​CCol>775 <CCol xs={12}>776 <CCard className="mb-4">777 <CCardHeader>778 <strong>React Table</​strong> <small>Table head</​small>779 </​CCardHeader>780 <CCardBody>781 <p className="text-medium-emphasis small">782 Similar to tables and dark tables, use the modifier prop{' '}783 <code>color=&#34;light&#34;</​code> or <code>color=&#34;dark&#34;</​code> to make{' '}784 <code>&lt;CTableHead&gt;</​code>s appear light or dark gray.785 </​p>786 <DocsExample href="components/​table#table-head">787 <CTable>788 <CTableHead color="light">789 <CTableRow>790 <CTableHeaderCell scope="col">#</​CTableHeaderCell>791 <CTableHeaderCell scope="col">Class</​CTableHeaderCell>792 <CTableHeaderCell scope="col">Heading</​CTableHeaderCell>793 <CTableHeaderCell scope="col">Heading</​CTableHeaderCell>794 </​CTableRow>795 </​CTableHead>796 <CTableBody>797 <CTableRow>798 <CTableHeaderCell scope="row">1</​CTableHeaderCell>799 <CTableDataCell>Mark</​CTableDataCell>800 <CTableDataCell>Otto</​CTableDataCell>801 <CTableDataCell>@mdo</​CTableDataCell>802 </​CTableRow>803 <CTableRow>804 <CTableHeaderCell scope="row">2</​CTableHeaderCell>805 <CTableDataCell>Jacob</​CTableDataCell>806 <CTableDataCell>Thornton</​CTableDataCell>807 <CTableDataCell>@fat</​CTableDataCell>808 </​CTableRow>809 <CTableRow>810 <CTableHeaderCell scope="row">3</​CTableHeaderCell>811 <CTableDataCell>Larry</​CTableDataCell>812 <CTableDataCell>the Bird</​CTableDataCell>813 <CTableDataCell>@twitter</​CTableDataCell>814 </​CTableRow>815 </​CTableBody>816 </​CTable>817 </​DocsExample>818 <DocsExample href="components/​table#table-head">819 <CTable>820 <CTableHead color="dark">821 <CTableRow>822 <CTableHeaderCell scope="col">#</​CTableHeaderCell>823 <CTableHeaderCell scope="col">Class</​CTableHeaderCell>824 <CTableHeaderCell scope="col">Heading</​CTableHeaderCell>825 <CTableHeaderCell scope="col">Heading</​CTableHeaderCell>826 </​CTableRow>827 </​CTableHead>828 <CTableBody>829 <CTableRow>830 <CTableHeaderCell scope="row">1</​CTableHeaderCell>831 <CTableDataCell>Mark</​CTableDataCell>832 <CTableDataCell>Otto</​CTableDataCell>833 <CTableDataCell>@mdo</​CTableDataCell>834 </​CTableRow>835 <CTableRow>836 <CTableHeaderCell scope="row">2</​CTableHeaderCell>837 <CTableDataCell>Jacob</​CTableDataCell>838 <CTableDataCell>Thornton</​CTableDataCell>839 <CTableDataCell>@fat</​CTableDataCell>840 </​CTableRow>841 <CTableRow>842 <CTableHeaderCell scope="row">3</​CTableHeaderCell>843 <CTableDataCell colSpan="2">Larry the Bird</​CTableDataCell>844 <CTableDataCell>@twitter</​CTableDataCell>845 </​CTableRow>846 </​CTableBody>847 </​CTable>848 </​DocsExample>849 </​CCardBody>850 </​CCard>851 </​CCol>852 <CCol xs={12}>853 <CCard className="mb-4">854 <CCardHeader>855 <strong>React Table</​strong> <small>Table foot</​small>856 </​CCardHeader>857 <CCardBody>858 <DocsExample href="components/​table#table-foot">859 <CTable>860 <CTableHead color="light">861 <CTableRow>862 <CTableHeaderCell scope="col">#</​CTableHeaderCell>863 <CTableHeaderCell scope="col">Class</​CTableHeaderCell>864 <CTableHeaderCell scope="col">Heading</​CTableHeaderCell>865 <CTableHeaderCell scope="col">Heading</​CTableHeaderCell>866 </​CTableRow>867 </​CTableHead>868 <CTableBody>869 <CTableRow>870 <CTableHeaderCell scope="row">1</​CTableHeaderCell>871 <CTableDataCell>Mark</​CTableDataCell>872 <CTableDataCell>Otto</​CTableDataCell>873 <CTableDataCell>@mdo</​CTableDataCell>874 </​CTableRow>875 <CTableRow>876 <CTableHeaderCell scope="row">2</​CTableHeaderCell>877 <CTableDataCell>Jacob</​CTableDataCell>878 <CTableDataCell>Thornton</​CTableDataCell>879 <CTableDataCell>@fat</​CTableDataCell>880 </​CTableRow>881 <CTableRow>882 <CTableHeaderCell scope="row">3</​CTableHeaderCell>883 <CTableDataCell colSpan="2">Larry the Bird</​CTableDataCell>884 <CTableDataCell>@twitter</​CTableDataCell>885 </​CTableRow>886 </​CTableBody>887 <CTableHead>888 <CTableRow>889 <CTableDataCell>Footer</​CTableDataCell>890 <CTableDataCell>Footer</​CTableDataCell>891 <CTableDataCell>Footer</​CTableDataCell>892 <CTableDataCell>Footer</​CTableDataCell>893 </​CTableRow>894 </​CTableHead>895 </​CTable>896 </​DocsExample>897 </​CCardBody>898 </​CCard>899 </​CCol>900 <CCol xs={12}>901 <CCard className="mb-4">902 <CCardHeader>903 <strong>React Table</​strong> <small>Captions</​small>904 </​CCardHeader>905 <CCardBody>906 <p className="text-medium-emphasis small">907 A <code>&lt;CTableCaption&gt;</​code> functions like a heading for a table. It helps908 users with screen readers to find a table and understand what it&#39;s about and909 decide if they want to read it.910 </​p>911 <DocsExample href="components/​table#captions">912 <CTable>913 <CTableCaption>List of users</​CTableCaption>914 <CTableHead>915 <CTableRow>916 <CTableHeaderCell scope="col">#</​CTableHeaderCell>917 <CTableHeaderCell scope="col">Class</​CTableHeaderCell>918 <CTableHeaderCell scope="col">Heading</​CTableHeaderCell>919 <CTableHeaderCell scope="col">Heading</​CTableHeaderCell>920 </​CTableRow>921 </​CTableHead>922 <CTableBody>923 <CTableRow>924 <CTableHeaderCell scope="row">1</​CTableHeaderCell>925 <CTableDataCell>Mark</​CTableDataCell>926 <CTableDataCell>Otto</​CTableDataCell>927 <CTableDataCell>@mdo</​CTableDataCell>928 </​CTableRow>929 <CTableRow>930 <CTableHeaderCell scope="row">2</​CTableHeaderCell>931 <CTableDataCell>Jacob</​CTableDataCell>932 <CTableDataCell>Thornton</​CTableDataCell>933 <CTableDataCell>@fat</​CTableDataCell>934 </​CTableRow>935 <CTableRow>936 <CTableHeaderCell scope="row">3</​CTableHeaderCell>937 <CTableDataCell>Larry</​CTableDataCell>938 <CTableDataCell>the Bird</​CTableDataCell>939 <CTableDataCell>@twitter</​CTableDataCell>940 </​CTableRow>941 </​CTableBody>942 </​CTable>943 </​DocsExample>944 <p className="text-medium-emphasis small">945 You can also put the <code>&lt;CTableCaption&gt;</​code> on the top of the table with{' '}946 <code>caption=&#34;top&#34;</​code>.947 </​p>948 <DocsExample href="components/​table#captions">949 <CTable caption="top">950 <CTableCaption>List of users</​CTableCaption>951 <CTableHead>952 <CTableRow>953 <CTableHeaderCell scope="col">#</​CTableHeaderCell>954 <CTableHeaderCell scope="col">Class</​CTableHeaderCell>955 <CTableHeaderCell scope="col">Heading</​CTableHeaderCell>956 <CTableHeaderCell scope="col">Heading</​CTableHeaderCell>957 </​CTableRow>958 </​CTableHead>959 <CTableBody>960 <CTableRow>961 <CTableHeaderCell scope="row">1</​CTableHeaderCell>962 <CTableDataCell>Mark</​CTableDataCell>963 <CTableDataCell>Otto</​CTableDataCell>964 <CTableDataCell>@mdo</​CTableDataCell>965 </​CTableRow>966 <CTableRow>967 <CTableHeaderCell scope="row">2</​CTableHeaderCell>968 <CTableDataCell>Jacob</​CTableDataCell>969 <CTableDataCell>Thornton</​CTableDataCell>970 <CTableDataCell>@fat</​CTableDataCell>971 </​CTableRow>972 <CTableRow>973 <CTableHeaderCell scope="row">3</​CTableHeaderCell>974 <CTableDataCell>Larry</​CTableDataCell>975 <CTableDataCell>the Bird</​CTableDataCell>976 <CTableDataCell>@twitter</​CTableDataCell>977 </​CTableRow>978 </​CTableBody>979 </​CTable>980 </​DocsExample>981 </​CCardBody>982 </​CCard>983 </​CCol>984 </​CRow>985 )986}...

Full Screen

Full Screen

Blogs

Check out the latest blogs from LambdaTest on this topic:

How To Generate Test Report In NUnit?

This article is a part of our Content Hub. For more in-depth resources, check out our content hub on Selenium NUnit Tutorial.

How To Run Your First Playwright Test On Cloud

One of the biggest problems I’ve faced when building a test suite is not the writing of the tests but the execution. How can I execute 100s or 1000s of tests in parallel?If I try that on my local machine, it would probably catch fire – so we need a remote environment to send these to.

Top Selenium C# Frameworks For Automation Testing In 2020

With the ever-increasing number of languages and frameworks, it’s quite easy to get lost and confused in this huge sea of all these frameworks. Popular languages like C# provide us with a lot of frameworks and it’s quite essential to know which particular framework would be best suited for our needs.

How To Build CI/CD Pipeline With TeamCity For Selenium Test Automation

Continuous Integration/Continuous Deployment (CI/CD) has become an essential part of modern software development cycles. As a part of continuous integration, the developer should ensure that the Integration should not break the existing code because this could lead to a negative impact on the overall quality of the project. In order to show how the integration process works, we’ll take an example of a well-known continuous integration tool, TeamCity. In this article, we will learn TeamCity concepts and integrate our test suites with TeamCity for test automation by leveraging LambdaTest cloud-based Selenium grid.

What is Selenium Grid &#038; Advantages of Selenium Grid

Manual cross browser testing is neither efficient nor scalable as it will take ages to test on all permutations & combinations of browsers, operating systems, and their versions. Like every developer, I have also gone through that ‘I can do it all phase’. But if you are stuck validating your code changes over hundreds of browsers and OS combinations then your release window is going to look even shorter than it already is. This is why automated browser testing can be pivotal for modern-day release cycles as it speeds up the entire process of cross browser compatibility.

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.

LambdaTest Learning Hubs:

YouTube

You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.

Run pom automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful