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

Привет, участники переполнения стека

Это массив заголовков столбцов. Я хочу, чтобы столбец 1 - столбец 5 был выровнен по левому краю (все ячейки данных заголовка, подзаголовка и таблицы столбца 1 - столбец 5 были выровнены по левому краю), в то время как я хочу, чтобы столбцы 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'
      }
     ]
      },
      ];

reactjs javascript html css react-table
person Community    schedule 04.12.2018    source источник

Ответы (4)


arrow_upward
21
arrow_downward

Метод 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
 ...
 ...
 column = { columnDefaults }
 />

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

person kiranvj    schedule 04.12.2018
comment
Привет, спасибо, но для столбцов, которые будут выровнены по центру, данные их подячейки также будут выровнены по центру - person ; 04.12.2018
comment
Можете ли вы помочь мне в этом отношении, немного изменив свой ответ, чтобы вложенные ячейки также следовали шаблону заголовка, выровненный по центру заголовок будет иметь данные, выровненные по центру, а выровненный по левому краю заголовок будет иметь данные, выровненные по левому краю - person ; 04.12.2018

arrow_upward
0
arrow_downward

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

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

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

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

person Jayce444    schedule 04.12.2018
comment
Kiranvj почти решил, что моя проблема заключается в том, что столбцы будут выровнены по центру, их данные субячейки также будут выровнены по центру. Можете ли вы помочь мне в этом отношении, слегка изменив ответ kiranvj, чтобы вложенные ячейки также следовали шаблону заголовка, выровненный по центру заголовок будет иметь данные, выровненные по центру, а выровненный по левому краю заголовок будет иметь данные, выровненные по левому краю. - person ; 04.12.2018

arrow_upward
-1
arrow_downward

Использование 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
     }]
person Derek Adair    schedule 07.04.2019

arrow_upward
-2
arrow_downward

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

{
    Header: "Name",
    accessor: "name",
    headerStyle: {textAlign: 'right'}
},
person pigeontoe    schedule 20.05.2019
comment
Я пробовал, но у меня не работает - person Nick; 14.06.2021