web-dev-qa-db-ja.com

一部の列を左に揃え、一部の列を中央に揃えるReact Table-React

Hello Stackオーバーフローメンバー

これは、列ヘッダーの配列です。列1から列5を左揃え（列1から列5のすべてのヘッダー、サブヘッダー、およびテーブルデータセルを左揃え）、列6から列8を中央揃え（すべてのヘッダー、サブヘッダー列1から列5の表データセルを中央に揃える）。すべての列を中央に配置するか、すべての列を左揃えにすることしかできないため、これを解決するのを手伝ってください。

この画像に示すように、この特定のスタイルを列6から8のヘッダーに実装したいです。Image 。

私を助けることができるなら、CodeSandboxでデモを提供してください

これは私のヘッダーデータです

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'
      }
     ]
      },
      ];
javascripthtmlcssreactjsreact-table
8
user10374052

方法1：

このような何かが仕事をするはずです

columns: [
           {                 
              accessor: "firstName",
              Header: () => (
                    <div
                      style={{
                        textAlign:"right"
                      }}
                    >S Column 1</div>)
           },

あなたが私を助けることができるなら、CodeSandboxでデモを提供してください

再生 ここ

enter image description here

OPコメントの後に更新

ただし、中央揃えになる列の場合、サブセルデータも中央揃えになります

このようなセルスタイルを操作する

Cell: row => <div style={{ textAlign: "center" }}>{row.value}</div>

それを再生 ここ

enter image description here

方法2：

使用すると、headerClassNameを使用してクラス名を指定できます。そのクラスでは、ルールtext-align:center

したがって、コードは次のようになります

const columns = [{
  Header: 'Column 5',
  accessor: 'name',
  headerClassName: 'your-class-name'
},
{
......
}
]

方法3：

ヘッダーがたくさんある場合、すべてのヘッダーにheaderClassNameを追加するのは大変です。その場合、ReactTableDefaultsでクラス名を設定できます

import ReactTable, {ReactTableDefaults} from 'react-table';

const columnDefaults = {...ReactTableDefaults.column, headerClassName: 'text-left-classname'}

そしてReactTableでは、このように使用します

<ReactTable
 ...
 ...
 columns = { columnDefaults }
 />

注：bootstrapを使用している場合、組み込みクラスtext-centerからheaderClassName

6
kiranvj

headerStyle: {textAlign: 'right'}を列に追加すると、ヘッダーセルのカスタムレンダラーを必要とせずにトリックを実行できます。少しきれいな私見

{
    Header: "Name",
    accessor: "name",
    headerStyle: {textAlign: 'right'}
},
0
pigeontoe

いくつかのオプションがあります。 1つは、列構成がstyleプロパティを使用することです。このプロパティを使用して、textAlignを含むカスタムCSSを渡すことができます（列プロパティのドキュメントについては here を参照）。各列に、目的のtextAlignスタイル値を渡します。

別のオプションは、カスタムCellプロパティを列に渡し、テキスト配置スタイルを割り当てた要素でコンテンツをラップすることです。何かのようなもの：

{
    Header: "Name",
    accessor: "name",
    Cell: cellContent => <RightAlign>{cellContent}</RightAlign>
},

（Googleでドキュメントと使用例を見る）

0
Jayce444