web-dev-qa-db-fra.com

Comment faire en sorte que certaines colonnes s'alignent à gauche et certaines colonnes s'alignent au centre dans React Table - React

Membres de débordement Hello Stack

Il s'agit d'un tableau pour les en-têtes de colonne. Je veux que la colonne 1 à la colonne 5 soit alignée à gauche (toutes les cellules de données d'en-tête, de sous-en-tête et de tableau de la colonne 1 à la colonne 5 soient alignées à gauche) tandis que je veux que la colonne 6 à la colonne 8 soient alignées au centre (tout l'en-tête, sous-en-tête et tableau des cellules de données de la colonne 1 à la colonne 5 pour être alignées au centre). Aidez-moi à résoudre ce problème, car je peux uniquement aligner toutes les colonnes au centre ou aligner toutes les colonnes à gauche.

Je veux implémenter ce style particulier sur l'en-tête des colonnes 6 à 8 comme indiqué dans cette image. Image .

Si vous pouvez m'aider, veuillez fournir une démo sur CodeSandbox

Voici mes données d'en-tête

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

Méthode 1:

Quelque chose comme ça devrait faire le travail

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

Si vous pouvez m'aider, veuillez fournir une démo sur CodeSandbox

Jouer ici

enter image description here

Mise à jour après commentaire OP

mais pour les colonnes qui seront alignées au centre, leurs données de sous-cellule seront également alignées au centre

Manipuler des styles de cellule comme celui-ci

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

Jouez ici

enter image description here

Méthode 2:

Utiliser peut utiliser le headerClassName et spécifier un nom de classe, dans cette classe, vous pouvez spécifier la règle text-align:center

Ainsi, le code ressemblera

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

Méthode 3:

Si vous avez beaucoup d'en-têtes, l'ajout de headerClassName dans tous les en-têtes est pénible. Dans ce cas, vous pouvez définir le nom de la classe dans ReactTableDefaults

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

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

et dans le ReactTable, utilisez comme ceci

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

Remarque: si vous utilisez bootstrap vous pouvez affecter la classe intégrée text-center à headerClassName

6
kiranvj

Ajouter headerStyle: {textAlign: 'right'} à la colonne fera l'affaire sans avoir besoin d'un rendu personnalisé pour la cellule d'en-tête. Un peu plus propre à mon humble avis

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

Il y a quelques options. La première est que la configuration de colonne prend une propriété style, que vous pouvez utiliser pour passer en CSS personnalisé, y compris textAlign (voir ici pour les documents sur les propriétés des colonnes). Dans chaque colonne, passez la valeur de style textAlign souhaitée.

Une autre option consiste à transmettre une propriété Cell personnalisée aux colonnes et à encapsuler votre contenu dans un élément auquel vous avez affecté le style d'alignement du texte. Quelque chose comme:

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

(Google autour pour voir les documents et exemples d'utilisation)

0
Jayce444