Search code examples
reactjsbootstrap-4datatable

dataTable style (color, bgcColor, border...)

How can I change the styling(color, bgColr, border,hover ..etc) of dataTable with reactjs dataTable image

Solution

  • To change the style of reactDataTable you can override the CSS styles.

    CSS Overrides
    If you would like to customize the layout components of React Data Table using styled-components (e.g. styled(DataTable)), or your favorite CSS, SCSS, LESS, etc.. pre-processor you may use the following classNames:

    • rdt_Table
    • rdt_TableRow
    • rdt_TableCol
    • rdt_TableCol_Sortable
    • rdt_TableCell
    • rdt_TableHeader
    • rdt_TableFooter
    • rdt_TableHead
    • rdt_TableHeadRow
    • rdt_TableBody
    • rdt_ExpanderRow

    Check the react data table documentation
    Check a working stackblitz example