Spalten-Sichtbarkeits-Anleitung

Beispiele

Möchten Sie direkt zur Implementierung springen? Sehen Sie sich diese Beispiele an

Die Spalten-Sichtbarkeits-Funktion ermöglicht das dynamische Ein- oder Ausblenden von Tabellenspalten. In früheren Versionen von react-table war diese Funktion eine statische Eigenschaft einer Spalte, aber in v8 gibt es einen dedizierten columnVisibility-Status und APIs zur Verwaltung der Spalten-Sichtbarkeit auf dynamische Weise.

Spalten-Sichtbarkeits-Status

Der columnVisibility-Status ist eine Map von Spalten-IDs zu booleschen Werten. Eine Spalte wird ausgeblendet, wenn ihre ID in der Map vorhanden ist und der Wert false ist. Wenn die Spalten-ID nicht in der Map vorhanden ist oder der Wert true ist, wird die Spalte angezeigt.

jsx

const [columnVisibility, setColumnVisibility] = useState({
  columnId1: true,
  columnId2: false, //hide this column by default
  columnId3: true,
});

const table = useReactTable({
  //...
  state: {
    columnVisibility,
    //...
  },
  onColumnVisibilityChange: setColumnVisibility,
});

const [columnVisibility, setColumnVisibility] = useState({
  columnId1: true,
  columnId2: false, //hide this column by default
  columnId3: true,
});

const table = useReactTable({
  //...
  state: {
    columnVisibility,
    //...
  },
  onColumnVisibilityChange: setColumnVisibility,
});

Alternativ können Sie, wenn Sie den Status der Spalten-Sichtbarkeit nicht außerhalb der Tabelle verwalten müssen, den anfänglichen Standardstatus der Spalten-Sichtbarkeit immer noch über die Option initialState festlegen.

Hinweis: Wenn columnVisibility sowohl für initialState als auch für state angegeben wird, hat die Initialisierung von state Vorrang und initialState wird ignoriert. Geben Sie columnVisibility nicht sowohl für initialState als auch für state an, sondern nur für eines von beiden.

jsx

const table = useReactTable({
  //...
  initialState: {
    columnVisibility: {
      columnId1: true,
      columnId2: false, //hide this column by default
      columnId3: true,
    },
    //...
  },
});

const table = useReactTable({
  //...
  initialState: {
    columnVisibility: {
      columnId1: true,
      columnId2: false, //hide this column by default
      columnId3: true,
    },
    //...
  },
});

Spalten ausblenden deaktivieren

Standardmäßig können alle Spalten ausgeblendet oder angezeigt werden. Wenn Sie verhindern möchten, dass bestimmte Spalten ausgeblendet werden, setzen Sie die Spaltenoption enableHiding für diese Spalten auf false.

jsx

const columns = [
  {
    header: 'ID',
    accessorKey: 'id',
    enableHiding: false, // disable hiding for this column
  },
  {
    header: 'Name',
    accessor: 'name', // can be hidden
  },
];

const columns = [
  {
    header: 'ID',
    accessorKey: 'id',
    enableHiding: false, // disable hiding for this column
  },
  {
    header: 'Name',
    accessor: 'name', // can be hidden
  },
];

APIs zum Umschalten der Spalten-Sichtbarkeit

Es gibt mehrere Spalten-API-Methoden, die nützlich sind, um Umschalter für die Spalten-Sichtbarkeit in der Benutzeroberfläche zu rendern.

column.getCanHide - Nützlich, um den Sichtbarkeits-Umschalter für eine Spalte zu deaktivieren, bei der enableHiding auf false gesetzt ist.
column.getIsVisible - Nützlich, um den anfänglichen Status des Sichtbarkeits-Umschalters festzulegen.
column.toggleVisibility - Nützlich, um die Sichtbarkeit einer Spalte umzuschalten.
column.getToggleVisibilityHandler - Abkürzung zum Verknüpfen der column.toggleVisibility-Methode mit einem UI-Ereignisbehandler.

jsx

{table.getAllColumns().map((column) => (
  <label key={column.id}>
    <input
      checked={column.getIsVisible()}
      disabled={!column.getCanHide()}
      onChange={column.getToggleVisibilityHandler()}
      type="checkbox"
    />
    {column.columnDef.header}
  </label>
))}

{table.getAllColumns().map((column) => (
  <label key={column.id}>
    <input
      checked={column.getIsVisible()}
      disabled={!column.getCanHide()}
      onChange={column.getToggleVisibilityHandler()}
      type="checkbox"
    />
    {column.columnDef.header}
  </label>
))}

Spalten-Sichtbarkeit-bewusste Tabellen-APIs

Wenn Sie Ihre Kopf-, Körper- und Fußzeilenzellen rendern, stehen viele API-Optionen zur Verfügung. Möglicherweise sehen Sie APIs wie table.getAllLeafColumns und row.getAllCells, aber wenn Sie diese APIs verwenden, berücksichtigen sie die Spalten-Sichtbarkeit nicht. Stattdessen müssen Sie die "sichtbaren" Varianten dieser APIs verwenden, wie z. B. table.getVisibleLeafColumns und row.getVisibleCells.

jsx

<table>
  <thead>
    <tr>
      {table.getVisibleLeafColumns().map((column) => ( // takes column visibility into account
        //
      ))}
    </tr>
  </thead>
  <tbody>
    {table.getRowModel().rows.map((row) => (
      <tr key={row.id}>
        {row.getVisibleCells().map((cell) => ( // takes column visibility into account
          //
        ))}
      </tr>
    ))}
  </tbody>
</table>

<table>
  <thead>
    <tr>
      {table.getVisibleLeafColumns().map((column) => ( // takes column visibility into account
        //
      ))}
    </tr>
  </thead>
  <tbody>
    {table.getRowModel().rows.map((row) => (
      <tr key={row.id}>
        {row.getVisibleCells().map((cell) => ( // takes column visibility into account
          //
        ))}
      </tr>
    ))}
  </tbody>
</table>

Wenn Sie die Header-Group-APIs verwenden, werden diese die Spalten-Sichtbarkeit bereits berücksichtigen.

Spalten-Sichtbarkeits-Anleitung

Beispiele

Weitere Beispiele

API