Zeilenauswahl-Leitfaden

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

• React Zeilenauswahl
• Vue Zeilenauswahl
• React Erweitern

API für Zeilenauswahl

Die Funktion zur Zeilenauswahl verfolgt, welche Zeilen ausgewählt sind, und ermöglicht es Ihnen, die Auswahl von Zeilen auf vielfältige Weise umzuschalten. Werfen wir einen Blick auf einige gängige Anwendungsfälle.

Die Tabelleninstanz verwaltet bereits den Status der Zeilenauswahl für Sie (obwohl es, wie unten gezeigt, praktischer sein kann, den Status der Zeilenauswahl in Ihrem eigenen Geltungsbereich zu verwalten). Sie können auf den internen Status der Zeilenauswahl oder die ausgewählten Zeilen über einige APIs zugreifen.

• getState().rowSelection - gibt den internen Status der Zeilenauswahl zurück
• getSelectedRowModel() - gibt die ausgewählten Zeilen zurück
• getFilteredSelectedRowModel() - gibt die ausgewählten Zeilen nach dem Filtern zurück
• getGroupedSelectedRowModel() - gibt die ausgewählten Zeilen nach Gruppierung und Sortierung zurück

console.log(table.getState().rowSelection) //get the row selection state - { 1: true, 2: false, etc... }
console.log(table.getSelectedRowModel().rows) //get full client-side selected rows
console.log(table.getFilteredSelectedRowModel().rows) //get filtered client-side selected rows
console.log(table.getGroupedSelectedRowModel().rows) //get grouped client-side selected rows

console.log(table.getState().rowSelection) //get the row selection state - { 1: true, 2: false, etc... }
console.log(table.getSelectedRowModel().rows) //get full client-side selected rows
console.log(table.getFilteredSelectedRowModel().rows) //get filtered client-side selected rows
console.log(table.getGroupedSelectedRowModel().rows) //get grouped client-side selected rows

Hinweis: Wenn Sie manuelle Paginierung verwenden, beachten Sie, dass die API getSelectedRowModel nur die ausgewählten Zeilen auf der aktuellen Seite zurückgibt, da Tabellenzeilenmodelle Zeilen nur basierend auf den übergebenen Daten generieren können. Der Status der Zeilenauswahl kann jedoch Zeilen-IDs enthalten, die nicht in der Daten-Array vorhanden sind.

Auch wenn die Tabelleninstanz den Status der Zeilenauswahl bereits für Sie verwaltet, ist es normalerweise praktischer, den Status selbst zu verwalten, um einfachen Zugriff auf die IDs der ausgewählten Zeilen zu haben, die Sie für API-Aufrufe oder andere Aktionen verwenden können.

Verwenden Sie die Tabellenoption onRowSelectionChange, um den Status der Zeilenauswahl in Ihren eigenen Geltungsbereich zu verschieben. Übergeben Sie dann den Status der Zeilenauswahl mit der Tabellenoption state zurück an die Tabelleninstanz.

const [rowSelection, setRowSelection] = useState<RowSelectionState>({}) //manage your own row selection state

const table = useReactTable({
  //...
  onRowSelectionChange: setRowSelection, //hoist up the row selection state to your own scope
  state: {
    rowSelection, //pass the row selection state back to the table instance
  },
})

const [rowSelection, setRowSelection] = useState<RowSelectionState>({}) //manage your own row selection state

const table = useReactTable({
  //...
  onRowSelectionChange: setRowSelection, //hoist up the row selection state to your own scope
  state: {
    rowSelection, //pass the row selection state back to the table instance
  },
})

Standardmäßig ist die Zeilen-ID für jede Zeile einfach der row.index. Wenn Sie Funktionen zur Zeilenauswahl verwenden, möchten Sie höchstwahrscheinlich eine nützlichere Zeilenkennung verwenden, da der Status der Zeilenauswahl nach Zeilen-ID indiziert wird. Sie können die Tabellenoption getRowId verwenden, um eine Funktion anzugeben, die eine eindeutige Zeilen-ID für jede Zeile zurückgibt.

const table = useReactTable({
  //...
  getRowId: row => row.uuid, //use the row's uuid from your database as the row id
})

const table = useReactTable({
  //...
  getRowId: row => row.uuid, //use the row's uuid from your database as the row id
})

Wenn Zeilen ausgewählt sind, sieht der Status der Zeilenauswahl etwa so aus

{
  "13e79140-62a8-4f9c-b087-5da737903b76": true,
  "f3e2a5c0-5b7a-4d8a-9a5c-9c9b8a8e5f7e": false
  //...
}

{
  "13e79140-62a8-4f9c-b087-5da737903b76": true,
  "f3e2a5c0-5b7a-4d8a-9a5c-9c9b8a8e5f7e": false
  //...
}

anstatt so

{
  "0": true,
  "1": false
  //...
}

{
  "0": true,
  "1": false
  //...
}

Die Zeilenauswahl ist standardmäßig für alle Zeilen aktiviert. Um die Zeilenauswahl entweder für bestimmte Zeilen bedingt zu aktivieren oder für alle Zeilen zu deaktivieren, können Sie die Tabellenoption enableRowSelection verwenden, die entweder einen booleschen Wert oder eine Funktion für eine feinere Steuerung akzeptiert.

const table = useReactTable({
  //...
  enableRowSelection: row => row.original.age > 18, //only enable row selection for adults
})

const table = useReactTable({
  //...
  enableRowSelection: row => row.original.age > 18, //only enable row selection for adults
})

Um zu erzwingen, ob eine Zeile in Ihrer UI auswählbar ist oder nicht, können Sie die API row.getCanSelect() für Ihre Checkboxen oder andere Auswahl-UIs verwenden.

Standardmäßig erlaubt die Tabelle die Auswahl mehrerer Zeilen gleichzeitig. Wenn Sie jedoch nur eine einzelne Zeile gleichzeitig auswählen möchten, können Sie die Tabellenoption enableMultiRowSelection auf false setzen, um die Mehrfachzeilenauswahl zu deaktivieren, oder eine Funktion übergeben, um die Mehrfachzeilenauswahl für Unterzeilen einer Zeile bedingt zu deaktivieren.

Dies ist nützlich, um Tabellen mit Radiobuttons anstelle von Checkboxen zu erstellen.

const table = useReactTable({
  //...
  enableMultiRowSelection: false, //only allow a single row to be selected at once
  // enableMultiRowSelection: row => row.original.age > 18, //only allow a single row to be selected at once for adults
})

const table = useReactTable({
  //...
  enableMultiRowSelection: false, //only allow a single row to be selected at once
  // enableMultiRowSelection: row => row.original.age > 18, //only allow a single row to be selected at once for adults
})

Standardmäßig wählt die Auswahl einer übergeordneten Zeile alle ihre Unterzeilen aus. Wenn Sie die automatische Unterzeilenauswahl deaktivieren möchten, können Sie die Tabellenoption enableSubRowSelection auf false setzen, um die Unterzeilenauswahl zu deaktivieren, oder eine Funktion übergeben, um die Unterzeilenauswahl für Unterzeilen einer Zeile bedingt zu deaktivieren.

const table = useReactTable({
  //...
  enableSubRowSelection: false, //disable sub-row selection
  // enableSubRowSelection: row => row.original.age > 18, //disable sub-row selection for adults
})

const table = useReactTable({
  //...
  enableSubRowSelection: false, //disable sub-row selection
  // enableSubRowSelection: row => row.original.age > 18, //disable sub-row selection for adults
})

TanStack Table schreibt nicht vor, wie Sie Ihre UI für die Zeilenauswahl rendern sollen. Sie können Checkboxen, Radiobuttons verwenden oder einfach Klick-Events an die Zeile selbst koppeln. Die Tabelleninstanz bietet einige APIs, die Ihnen beim Rendern Ihrer UI für die Zeilenauswahl helfen.

TanStack Table stellt einige Handler-Funktionen bereit, die Sie direkt mit Ihren Checkbox-Eingaben verbinden können, um die Zeilenauswahl einfach umzuschalten. Diese Funktionen rufen automatisch andere interne APIs auf, um den Status der Zeilenauswahl zu aktualisieren und die Tabelle neu zu rendern.

Verwenden Sie die API row.getToggleSelectedHandler(), um sie mit Ihren Checkbox-Eingaben zu verbinden und die Auswahl einer Zeile umzuschalten.

Verwenden Sie die APIs table.getToggleAllRowsSelectedHandler() oder table.getToggleAllPageRowsSelectedHandler, um sie mit Ihrer "Alle auswählen"-Checkbox-Eingabe zu verbinden und die Auswahl aller Zeilen umzuschalten.

Wenn Sie eine feinere Steuerung über diese Handler-Funktionen benötigen, können Sie jederzeit einfach die APIs row.toggleSelected() oder table.toggleAllRowsSelected() direkt verwenden. Oder Sie können sogar einfach die API table.setRowSelection() aufrufen, um den Status der Zeilenauswahl direkt festzulegen, genau wie bei jeder anderen Zustandsaktualisierung. Diese Handler-Funktionen sind nur eine Bequemlichkeit.

const columns = [
  {
    id: 'select-col',
    header: ({ table }) => (
      <Checkbox
        checked={table.getIsAllRowsSelected()}
        indeterminate={table.getIsSomeRowsSelected()}
        onChange={table.getToggleAllRowsSelectedHandler()} //or getToggleAllPageRowsSelectedHandler
      />
    ),
    cell: ({ row }) => (
      <Checkbox
        checked={row.getIsSelected()}
        disabled={!row.getCanSelect()}
        onChange={row.getToggleSelectedHandler()}
      />
    ),
  },
  //... more column definitions...
]

const columns = [
  {
    id: 'select-col',
    header: ({ table }) => (
      <Checkbox
        checked={table.getIsAllRowsSelected()}
        indeterminate={table.getIsSomeRowsSelected()}
        onChange={table.getToggleAllRowsSelectedHandler()} //or getToggleAllPageRowsSelectedHandler
      />
    ),
    cell: ({ row }) => (
      <Checkbox
        checked={row.getIsSelected()}
        disabled={!row.getCanSelect()}
        onChange={row.getToggleSelectedHandler()}
      />
    ),
  },
  //... more column definitions...
]

Wenn Sie eine einfachere UI für die Zeilenauswahl wünschen, können Sie einfach Klick-Events an die Zeile selbst koppeln. Die API row.getToggleSelectedHandler() ist auch für diesen Anwendungsfall nützlich.

<tbody>
  {table.getRowModel().rows.map(row => {
    return (
      <tr
        key={row.id}
        className={row.getIsSelected() ? 'selected' : null}
        onClick={row.getToggleSelectedHandler()}
      >
        {row.getVisibleCells().map(cell => {
          return <td key={cell.id}>{/* */}</td>
        })}
      </tr>
    )
  })}
</tbody>

<tbody>
  {table.getRowModel().rows.map(row => {
    return (
      <tr
        key={row.id}
        className={row.getIsSelected() ? 'selected' : null}
        onClick={row.getToggleSelectedHandler()}
      >
        {row.getVisibleCells().map(cell => {
          return <td key={cell.id}>{/* */}</td>
        })}
      </tr>
    )
  })}
</tbody>