Горизонтальная карусель в таблице React js для сдвига нескольких записей

Question

У меня есть следующая таблица, которая показывает много данных. К сожалению, данные выходят из таблицы. Я хочу горизонтальную карусель, чтобы данные помещались в таблицу, и при нажатии на карусель показывается следующий набор данных. Например, Мне нужно показать 9 столбцов, затем после сдвига следующих 9 и т. Д. Я очень новичок в Reactjs, поэтому мне нужна помощь. Ниже мой код:

<table className="table table table-bordered table-striped" id="tableBorder">
      <thead className="tableTransform">
        <tr>
          {features.map(feature => (
            <th key={feature.featureName} style={{ color: "white" }}> 
            <Link className="push" to={{pathname:"/FeaturesPage", aboutProps: { id: feature.featureID} }}  >                
              {feature.featureName} 
              </Link></th>
 ))}             
        </tr>    
      </thead>
      <tbody>
        {["featureTechDescription", "sourceSystem", "sampleValues", "featureActiveFlag",
        "featureCreatedDate", "featureEndDate", "dateLoadTimeStamp", "dateUpdateTimeStamp"].map(
          key => (
            <tr key={key}>
              {features.map(feature => (
                <td key={feature.featureName}>
                  {feature[key]}</td>
              ))}
            </tr>
          )
        )}
      </tbody>
    </table>