Как заставить некоторые столбцы выравнивать по левому краю, а некоторые - по центру столбца в React Table - React

Question

Члены Hello Stack переполнения

Это массив для заголовков столбцов.Я хочу, чтобы столбец 1 - столбец 5 выравнивался по левому краю (все ячейки данных заголовка, подзаголовка и таблицы столбца 1 - столбец 5 должны быть выровнены по левому краю), а II - чтобы столбец 6 - столбец 8 был выровнен по центру (весь заголовок, подзаголовоки ячейки данных таблицы от столбца 1 до столбца 5 должны быть выровнены по центру).Пожалуйста, помогите мне решить эту проблему, поскольку я могу выровнять либо все столбцы по центру, либо все столбцы по левому краю.

Я хочу реализовать этот конкретный стиль в заголовках столбцов 6–8, как показано на этом рисунке. .

Если вы можете мне помочь, предоставьте демо-версию 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'
      }
     ]
      },
      ];

Answer 1

Добавление headerStyle: {textAlign: 'right'} к столбцу поможет без необходимости настраиваемого средства визуализации для ячейки заголовка.Немного чище imho

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

Answer 2

Метод 1:

Что-то вроде этого должно сделать работу

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

Если вы можете мне помочь, пожалуйста, предоставьте демонстрацию на CodeSandbox

Играть здесь

Обновление после OP комментария

, но для столбцов, которые будут выровнены по центру, данные их подэлементов также будут выровнены по центру

Манипулировать стилями ячеек следующим образом

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

Воспроизвести здесь

Метод 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 }
 />

Примечание: если вы используете самозагрузкуможно назначить встроенный класс text-center для headerClassName

Answer 3

Использование CSS + headerClassName

CSS

.ReactTable .rt-thead .rt-tr-align-left {
    text-align: left;
}

.ReactTable .rt-thead .rt-tr-align-right{
    text-align: right;
}

Конфигурация столбца

const columns = [
 {
    Header: 'Column 1',
    columns: [
           {
               Header: 'S Column 1',
               accessor: 'firstName',
               // Apply custom className to header
               headerClassName: 'rt-tr-align-left'
           }
      ]
  },
  {
     Header: 'Column 2',
     columns: [{
            Header: 'S Column 2',
            accessor: 'firstName',
            // Apply custom className to header
            headerClassName: 'rt-tr-align-right'

          }
       ]
       /// etc
     }]

Answer 4

Есть несколько вариантов.Во-первых, конфигурация столбца принимает свойство style, которое можно использовать для передачи в пользовательском CSS, включая textAlign (см. здесь для документации по свойствам столбца).В каждый столбец введите желаемое значение стиля textAlign.

Другой вариант - передать пользовательское свойство Cell в столбцы и обернуть содержимое в элемент, которому назначено выравнивание текста.моделирование.Что-то вроде:

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

(Google вокруг, чтобы увидеть документы и примеры использования)