Как разместить все эти столбцы с помощью CSS - React

Question

Здравствуйте, я пытаюсь создать таблицу реагирования

Я пытаюсь создать таблицу реагирования, подобную изображению 1

Будет больше строк.

Я могу сделать это следующим образом - изображение 2

Я использую таблицу реагирования с этого сайта - Учебное пособие

Я слежу за этой демонстрацией - Демо

Это мой компонент React Table

//Code start for react table

// Import React Table
import ReactTable from 'react-table';
import 'react-table/react-table.css';

import React from 'react';
//import { render } from 'react-dom';
import { makeData } from './Utils';

const columns = [
{
Header: 'Column 1',
columns: [
  {
    Header: 'S Column 1',
    accessor: 'firstName'
  }
]
  },
 {
Header: 'Column 2',
columns: [
  {
    Header: 'S Column 2',
    accessor: 'firstName'
  }
]
 },
{
Header: 'Column 3',
columns: [
  {
    Header: 'S Column 3',
    accessor: 'firstName'
  }
]
  },
 {
Header: 'Column 4',
columns: [
  {
    Header: 'S column 4',
    accessor: 'firstName'
  }
]
  },
 {
Header: 'Column 5',
columns: [
  {
    Header: 'S column 5',
    accessor: 'firstName'
  }
]
 },
{
Header: 'Column 6',
columns: [
  {
    Header: 'S column 6a',
    accessor: 'firstName'
  },
  {
    Header: 'S column 6b',
    accessor: 'firstName'
  },
  {
    Header: 'S column 6c',
    accessor: 'firstName'
  },
  {
    Header: 'S column 6d',
    accessor: 'firstName'
  }
]
  },
 {
Header: 'Column 7',
columns: [
  {
    Header: 'S column 7',
    accessor: 'firstName'
  }
]
  },
 {
Header: 'Column 8',
columns: [
  {
    Header: 'S Column 8a',
    accessor: 'firstName'
  },
  {
    Header: 'S Column 8b',
    accessor: 'firstName'
  },
  {
    Header: 'S Column 8c',
    accessor: 'firstName'
  },
  {
    Header: 'S Column 8d',
    accessor: 'firstName'
  }
]
  },
];

class ReactTableComponent extends React.Component {
 constructor() {
 super();
 this.state = {
  data: makeData()
  };
 }
 render() {
  const { data } = this.state;
  return (
  <div>
    <ReactTable
      data={data}
      columns={columns}
      defaultPageSize={10}
      className="-striped -highlight"
      SubComponent={(row) => {
        return (
          <div style={{ padding: '20px' }}>
            <em>
              You can put any component you want here, even another React
              Table! {row}
            </em>
            <br />
            <br />
            <ReactTable
              data={data}
              columns={columns}
              defaultPageSize={3}
              showPagination={false}
              SubComponent={(row1) => {
                return (
                  <div style={{ padding: '20px' }}>
                    Another Sub Component! {row1}
                  </div>
                );
              }}
            />
          </div>
        );
      }}
    />
    <br />
  </div>
);
  }
  }
  export default ReactTableComponent;

    // code ends for React Table Component

Это моя таблица React CSS - Это огромный CSS-файл,Вот почему я связываю его с Socrates.io Сократ Ссылка React Table css - Этот файл находится в моих модулях узла

Я переписал некоторые из React Table CSS в локальный файл CSS

.ReactTable {
 width: 108%;
 margin-left: -50px;
.status {
.icon {
  border: 2px solid;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  border-radius: 10px;
  display: inline-block;
  &.responded {
    border-color: #61d321;
  }
  &.active {
    border-color: #da6d2c;
   }
  }
 .text {
  vertical-align: text-bottom;
  }
 }
 .enquiryId {
 img {
  width: 12px;
  margin-left: 10px;
   }
 }
.statusFlag img {
 height: 20px;
 margin-right: 10px;
}
.dropdown {
  position: absolute;
  width: 100px !important;
  margin-top: -20px;
  &.-list {
  top: 59px !important;
  width: 150px !important;
  left: -50px;
  }
 }
.chkProd {
  height: 15px;
  width: 15px;
 }
.rt-tbody .rt-td:last-child {
 margin-right: 10px;
   }
  .rt-thead {
  .rt-tr {
   font-size: 11px;
   font-weight: 600;
   font-family: 'Nunito Sans';
   color: #ffffff;
   height: 36px;
   background-color: #3776ce;
   margin-top: -0.5px;
 }
.rt-th {
  border: none;
  margin: auto;
  margin-left: -20px;
}
.rt-td  rt-expandable {
  flex: 35 0 auto;
  width: 35px;
  max-width: 35px;
  visibility: hidden;
   }
 }
  .rt-tbody {
 .rt-td {
  border: none;
  margin: auto;
  }
 .rt-tr {
  font-size: 14px;
  font-family: 'Nunito Sans';
  font-weight: 600;
  text-align: center;
  color: #000000;
  height: 72px;
  background-color: #f8f9fa; // box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.03);
  border-bottom: 0px solid rgba(0, 0, 0, 0.03);
  //border-left: 3px solid #3776ce;
  //margin-left: -20px;
 }
 .rt-tr.-odd{margin-left: -20px;}
 .rt-tr.-even{margin-left: -20px;}
  }
 }

Это мой файл Utils, связанный с React Table

import React from 'react';
import namor from 'namor';

const range = (len) => {
const arr = [];
for (let i = 0; i < len; i = i + 1) {
arr.push(i);
}
  return arr;
  };

const newPerson = () => {
  const statusChance = Math.random();
  let status;
 if(statusChance > 0.66) {
   status = 'relationship';
} else if(statusChance > 0.33) {
   status = 'complicated';
 } else {
   status = 'single';
 }
 return {
   firstName: namor.generate({ words: 1, numbers: 0 }),
   lastName: namor.generate({ words: 1, numbers: 0 }),
   age: Math.floor(Math.random() * 30),
   visits: Math.floor(Math.random() * 100),
   progress: Math.floor(Math.random() * 100),
  status: String(status)
   };
  };

export function makeData(len = 5553) {
 return range(len).map(() => {
 return {
  ...newPerson(),
  children: range(10).map(newPerson)
  };
});
}

Как видите, в моей таблице 8 столбцов.Также в столбцах 6 и 8 есть несколько вложенных столбцов. Также в столбцах 6-й и 8-й строк есть две строки.Кроме того, 6-й, 7-й и 8-й столбец имеет разные цвета.Я не могу создать эти три вещи - поместите все мои столбцы, разный цвет столбцов 6, 7 и 8 и несколько строк в подколонках 6 и 8.

Пожалуйста, помогите решить эти три проблемы.