Tables - React-Bootstrap

Skip to content react-bootstrap. HomeGetting StartedComponents. v2.2.1 (Bootstrap 5.1). Github Discord · Getting startedLayoutFormsComponents. MenuGettingstartedLayoutFormsComponentsAlertsAccordionBadgeBreadcrumbButtonsButtonGroupCardsCarouselCloseButtonDropdownsFiguresImagesListGroupModalNavsNavbarOffcanvasOverlaysPaginationPlaceholderPopoversProgressSpinnersTableTabsTooltipsToastsUtilitiesMigratingAboutTablesUsethestriped,borderedandhoverpropstocustomisethetable. # FirstName LastName Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 LarrytheBird @twitter # FirstName LastName Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 LarrytheBird@twitter CopySmallTable#Usesize="sm"tomaketablescompactbycuttingcellpaddinginhalf. # FirstName LastName Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 LarrytheBird @twitter # FirstName LastName Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 LarrytheBird@twitter CopyDarkTable#Usevariant="dark"toinvertthecolorsofthetableandgetlighttext onadarkbackground. # FirstName LastName Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 LarrytheBird @twitter # FirstName LastName Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 LarrytheBird@twitter CopyResponsive#Responsivetablesallowtablestobescrolledhorizontallywithease.AlwaysResponsive#Acrosseverybreakpoint,useresponsiveforhorizontallyscrollingtables. Responsivetablesarewrappedautomaticallyinadiv.Thefollowingexample has12columnsthatarescrollablehorizontally. # {Array.from({length:12}).map((_,index)=>( Tableheading ))} 1 {Array.from({length:12}).map((_,index)=>( Tablecell{index} ))} 2 {Array.from({length:12}).map((_,index)=>( Tablecell{index} ))} 3 {Array.from({length:12}).map((_,index)=>( Tablecell{index} ))} #{Array.from({length:12}).map((_,index)=>(Tableheading))} 1{Array.from({length:12}).map((_,index)=>(Tablecell{index}))} 2{Array.from({length:12}).map((_,index)=>(Tablecell{index}))} 3{Array.from({length:12}).map((_,index)=>(Tablecell{index}))} CopyBreakpointspecific#Useresponsive="sm",responsive="md",responsive="lg",orresponsive="xl" asneededtocreateresponsivetablesuptoaparticularbreakpoint.Fromthat breakpointandup,thetablewillbehavenormallyandnotscrollhorizontally.

CopyAPI#Table#viewsourcefileimportTablefrom'react-bootstrap/Table'CopyimportcodefortheTablecomponentNameTypeDefaultDescriptionborderedbooleanAddsbordersonallsidesofthetableandcells.borderlessbooleanRemovesallbordersonthetableandcells,includingtableheader.hoverbooleanEnableahoverstateontablerowswithina.responsiveboolean|stringResponsivetablesallowtablestobescrolledhorizontallywithease. Acrosseverybreakpoint,useresponsiveforhorizontally scrollingtables.Responsivetablesarewrappedautomaticallyinadiv. Useresponsive="sm",responsive="md",responsive="lg",or responsive="xl"asneededtocreateresponsivetablesupto aparticularbreakpoint.Fromthatbreakpointandup,thetablewill behavenormallyandnotscrollhorizontally.sizestringMaketablesmorecompactbycuttingcellpaddinginhalfbysetting sizeassm.stripedbooleanAddszebra-stripingtoanytablerowwithinthe .variantstringInvertthecolorsofthetable—withlighttextondarkbackgrounds bysettingvariantasdark.bsPrefixstring'table'ChangetheunderlyingcomponentCSSbaseclassnameandmodifierclassnamesprefix.Thisisanescapehatchforworkingwithheavilycustomizedbootstrapcss.