4
votes

Masquer la colonne du tableau à l'aide de antd

Comment pouvons-nous masquer une colonne de la table pour l'affichage dans le frontend qui existe déjà dans le tableau pour utiliser la table de conception fourmi?

Par exemple, j'ai une colonne appelée ID dans mon objet tableau, mais il n'est pas nécessaire de l'afficher dans la vue tableau, elle devrait être conservée dans la liste JSON elle-même à des fins de référence.

Lien Fiddle - Dans cet exemple, je ne souhaite pas afficher la colonne ID dans le tableau , mais j'ai utilisé l'ID pour une référence comme une suppression de ligne.

antd

4 commentaires

Omettez simplement cette colonne dans le champ colonnes

Dans mon scénario, je ne peux pas, il est conservé pour référence.

En général, la suggestion @awesoon est correcte. Jaison, quelle référence devez-vous conserver? Partagez la base de code afin que nous puissions comprendre le problème particulier.

Lien @Alex Fiddle ajouté.

4 Réponses :

1
votes

Les colonnes de Table sont utilisées pour contrôler les colonnes qui seront rendues par la table, mais n'ont aucune influence sur la forme des données utilisées comme dataSource . Omettre une colonne ne supprime pas sa valeur de dataSource et vous pouvez toujours la référencer par exemple dans la propriété render de la colonne (par exemple pour générer un callback).

Exemple de code ( notez que hiddenValue n'est pas directement référencé par la propriété dataIndex d'une colonne et pourrait être complètement omis ): p >

const TableWithHiddenColumn = () => {
    const dataSource = [
        { renderedValue: 'foo', hiddenValue: 'id_1' },
        { renderedValue: 'bar', hiddenValue: 'id_2' },
        { renderedValue: 'biz', hiddenValue: 'id_3' },
    ];

    const columns = [
        { title: 'Visible column', dataIndex: 'renderedValue', key: 'renderedValue' },
        {
            title: 'Action',
            key: 'action',
            render: (record) => (
                <Button
                    onClick={() => {
                        console.log(record.hiddenValue);
                    }}
                >
                    {record.hiddenValue}
                </Button>
            ),
        },
    ];

    return <Table columns={columns} dataSource={dataSource} />;
};

Résultat:

1 commentaires

Merci pour la rediffusion, question mise à jour avec un exemple.

2
votes

En général, la suggestion de Maktel est correcte: vous pouvez facilement implémenter ce que vous voulez en définissant render dans la colonne (notez qu'il n'y a pas de dataIndex):

let columns = [
  {
    title: "Name",
    dataIndex: "name",
    key: "name"
  },
  {
    title: "Age",
    dataIndex: "age",
    key: "age"
  },
  {
    title: "Address",
    dataIndex: "address",
    key: "address"
  },
  {
    title: "Action",
    key: "action",
    render: (row) => {
      let api = "/api/v1/row/delete/";
      //this ID be sued for POST delete row like a API below
      api = api + row.id;
      return <span onClick={() => { alert(api);}}>
         Delete
      </span >

    }
  }
];

let data = [
  {
    id: 312,
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park",
  },
  {
    id: 1564,
    name: "Jim Green",
    age: 42,
    address: "London No. 1 Lake Park",
  }
];

const App = () => <Table columns={columns} dataSource={data} />;

1 commentaires

Merci, c'était mon erreur, j'ai été mal compris pour le commentaire de @ awesoon.

5
votes

Vous pouvez remplacer les méthodes de rendu d'en-tête et de corps comme suit en supposant que votre colonne a une propriété visible.

import React, {Component} from 'react';

class Test extends Component {
  render() {
    const renderBody = (props, columns) => {
      return (
        <tr className={props.className}>
          {columns.map((item, idx) => {
            if (item.visible) {
              return props.children[idx]
            }
          })}
        </tr>
      );
    }

    const renderHeader = (props, columns) => {
      return (
        <tr>
          {columns.map((item, idx) => {
            if (item.visible)
              return props.children[idx];
          })};
        </tr>
      );
    }

    const columns = [{
      title: 'col1',
      dataIndex: 'col1',
      visible: true
    }, {
      title: 'col2',
      dataIndex: 'col2',
      visible: false
    }]

    return (
      <Table
        rowKey="key"
        columns={columns}
        dataSource={data.list || []}
        components={{
          header: {
            row: (props) => renderHeader(props, columns)
          },
          body: {
            row: (props) => renderBody(props, columns)
          },
        }}
      />
    )
  }
}

1 commentaires

Cela a parfaitement fonctionné pour moi ... jusqu'à ce que j'essaye d'activer rowSelection sur la table.

1
votes

Si vous avez déjà le code générant vos colonnes, une option beaucoup plus simple que d'implémenter une méthode de rendu personnalisée pour masquer une colonne est simplement de la filtrer hors de votre liste de colonnes complétée, par exemple:

let columns = [
  {
    title: "Id",
    dataIndex: "id",
    key: "id"
  },
  {
    title: "Name",
    dataIndex: "name",
    key: "name"
  },
  {
    title: "Address",
    dataIndex: "address",
    key: "address"
  }
];

return columns.filter(col => col.dataIndex !== 'id');

1 commentaires

A parfaitement fonctionné. Merci Monsieur.