Styling issue

[stelco]

Describe the bug

I am following the example here to add a custom checkbox. https://github.com/jbetancur/react-data-table-component#overriding-with-a-3rd-party-ui-component-library It works but the native checkbox also appears. The arrow on the expandable content is also hidden, although it does appear on page load then disappears. From my screenshot you can also see issues with the blue border on focus and the hover on the pagination. I have included styled-components and react-md as dependencies (npm)

                                <DataTable className="pagination-align-left"
                                    columns={columns}
                                    data={this.state.data}
                                    pagination
                                    selectableRows
                                    selectableRowsComponent={Checkbox}
                                    selectableRowsComponentProps={{ inkDisabled: false }}
                                    sortIcon={<FontIcon>arrow_downward</FontIcon>}
                                    onRowSelected={handleChange}
                                    expandableRows
                                    expandableRowsComponent={<ExpandedSection />}
                                    customTheme={smallPadding}
                                />

Expected behavior

Styling should work as expected. here: https://jbetancur.github.io/react-data-table-component/?path=/story/basic--expandable

Screenshots

Versions (please complete the following information)

• React
  • react-md
• Styled Components
• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Additional context

Add any other context about the problem here.

[jbetancur]

Interesting... I kind of duplicated this in a codesandbox and looking at the DOM that is not the native checkbox but rather I think something is messed up with the way react-md is imported, or an import is missing.

I recall that you needed to make sure your icons were correctly imported via css/sass or something like that, otherwise, you would get the native checkbox. I think the styles react-md requires are possibly not loading.

[jbetancur]

Actually, I think I see the issue - still react-md related but you will notice if you inspect the DOM that .md-selection-control-input class for some reason is not being applied. If I uncheck the css values on that class it exhibits the same behavior you are describing

[stelco]

Hi, thanks for your quick reply.

If you look at my screenshot below, you will see that the material-icons arrow is loading ok so not sure why the other icons dont load like the expander arrow. I am loading fonts from CDN in index.html...

        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Roboto">

and importing like this... import { Checkbox, FontIcon } from 'react-md'

then add to datatable params... sortIcon={<FontIcon>arrow_downward</FontIcon>}

With regards to the native checkbox displaying, do I need to import something else from react-md to fix this and hide them? Also, I do see the expander icon on page load then it disappears once page completely loaded.

[stelco]

Another quick question if thats ok... I am already using MDB React for my layout and styling. https://mdbootstrap.com/docs/react/ Can this be used instead of react-md, or is there functionality required from this. e.g. the expander functionality, rotating icons etc? Thanks.

[jbetancur]

Yea it’s not an icon issue as I initially thought but somehow the class for the input that react-md is not being applied. You can setup a codesandbox and see if you can dupe it or log an issue with react-md.

As for your questions np! You can use whatever checkbox component or library you want as long as it’s built with React. Personally, I switched over to material-ui for other projects and will be moving over the examples for this library to that as well.

The expander uses no library as it’s just an svg icon wrapped in a react component. Note you can also override the default expander icon.

Hope that helps!

[stelco]

Hi, it turns out that I answered my own question! The styles from mdb.scss were overriding react-md styles. I have created my own override styles to fix this as below...

//style overrides
.footer-hide footer {
  display: none;
}
.pagination-align-left footer.rdt_TableFooter {
  justify-content: flex-start;
}
.sites-dt .md-selection-control-input {
  display: none;
}
//override mdb.scss styles for react-md icons in datatables
svg {
  padding: 0!important;
}
button:focus,
button:active,
.material-icons
{
  outline: 0!important
}

Thanks for your help though, pointed me in the right direction.

[stelco]

Something else I just noticed is that if I uninstall react-md it appears to work ok. I did need to keep styled-components installed though. My icons are now loaded from MDB. I was just wondering where the styled-components are used and will I come into issues not having react-md installed? Thanks.

[jvcastro]

Anyone who have a solution to get rid of these big gaps?

[jbetancur]

@stelco rdt uses styled-components under the hood. It’s a peerDependancy which is why I have you install it separately.. This will not affect anything in your main app regardless of what css pre processor is used (react-md uses scss).

Rdt does use some internal classNames documented in the README, but they are unlikely to collide due to the way I named them.

Hope that clarifies!

[jbetancur]

@jvcastro I’d look into the column.grow property and try setting it to 0, or column.width for setting a fixed width. Otherwise, Please use the issue template and submit a new issue with a codesandbox so I can better help you.

[jbetancur]

closing this as "answered" 😉