Test your AI Agents with the all-new Agent to Agent Testing Platform.Learn More
How to use cell method in pom

Best Python code snippet using pom_python
Tables.js
Source:Tables.js
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}...
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.