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

Answer 1

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