ReactTable is ordering elements vertically

Question

I'm trying to use the 'react-table' library in my application. I'm not sure what I'm doing wrong but all of the elements in the table appear vertically on the left side, and not in a grid. This was happening in my application, so I tried creating a new app to just display this table.

I copied this example word for word: here The only difference is the data I hard coded two records.

This is what the page shows:

Name
Info
Stats
First Name
Last Name
Age
Status
Visits
Bret
Till
33
spoken for
4

Is there some CSS issue that's taking away inline or something? I'm new to react and even worse with CSS. I did remember to add this import:

import "react-table/react-table.css";

Here's a minimal repo that illustrates the issue:

react-table-minimal-repo

can you inspect your table with the browser console to make sure the correct css rules are being applied — azium, May 03 '18 at 21:48
I guess I'm not really sure what to look for. I see the outer div gets the class "ReactTable -striped -highlight" like the example sets it. — Zip184, May 06 '18 at 14:31
Assuming your using webpacker or something along those line to transpile your css, how are you including the pack to your page? I would bet your not including the compiled css — Steffan, May 07 '18 at 18:32
I don't think I did. Does that mean I have to manipulate my webpack.config files? How do I do that? I did eject my project to be able to use css classes but I was just following a tutorial. — Zip184, May 07 '18 at 19:25
@Zip184, your issue will get a fast resolution if you provide a minimal repo. Do that and it would save you and others a lot of time — Tarun Lalwani, May 17 '18 at 15:08
@Zip184 I can see the issue. The issue is you have create-react-app that you have ejected. When you build and server it is not serving the build directory. That is why it is not working — Tarun Lalwani, May 19 '18 at 14:27

Tarun Lalwani · Accepted Answer · 2018-05-19T15:08:01.543

5

Edit-1

The issue with your project is setting modules: true, if you comment that out the project works

require.resolve('style-loader'),
{
  loader: require.resolve('css-loader'),
  options: {
    importLoaders: 1,
    // modules: true,
    localIdentName: '[name]__[local]__[hash:base64:5]'
  },
},

See below issue for more details

https://github.com/ant-design/babel-plugin-import/issues/166

Original Answer

The issue is because you have done mess after ejecting the project. I created a new project

react-create-app reacttable2

And the copied the src folder for of yours and everything worked fine

edited May 19 '18 at 15:08

answered May 19 '18 at 14:57

Tarun Lalwani

142,312
9
204
265

I want to use css modules though. I add the class styles like this "className={classes.StyleName}" throughout the rest of my application. Is there a way I can fix this while still using them? – Zip184 May 19 '18 at 18:16
I was just reading about it. I should probably just un-eject and do styles the normal way. Didn't realize assigning styles this way wasn't a usual practice. – Zip184 May 19 '18 at 18:23

ReactTable is ordering elements vertically

1 Answers1