Spaltenübersicht

Tabellen-API

Spaltendefinitionen sind der wichtigste Teil beim Erstellen einer Tabelle. Sie sind verantwortlich für

• die Erstellung des zugrundeliegenden Datenmodells, das für alles verwendet wird, einschließlich Sortierung, Filterung, Gruppierung usw.
• die Formatierung des Datenmodells in das, was in der Tabelle angezeigt wird
• die Erstellung von Kopfzeilengruppen, Kopfzeilen und Fußzeilen
• die Erstellung von Spalten für reine Anzeigezwecke, z. B. Aktionsschaltflächen, Kontrollkästchen, Expander, Sparklines usw.

Die folgenden "Arten" von Spaltendefinitionen sind eigentlich keine TypeScript-Typen, sondern eher eine Möglichkeit, über übergeordnete Kategorien von Spaltendefinitionen zu sprechen und diese zu beschreiben.

• Zugriffsspalten
  • Zugriffsspalten haben ein zugrundeliegendes Datenmodell, was bedeutet, dass sie sortiert, gefiltert, gruppiert usw. werden können.
• Anzeigespalten
  • Anzeigespalten haben kein Datenmodell, was bedeutet, dass sie nicht sortiert, gefiltert usw. werden können, aber sie können verwendet werden, um beliebige Inhalte in der Tabelle anzuzeigen, z. B. eine Schaltfläche für Zeilenaktionen, ein Kontrollkästchen, einen Expander usw.
• Gruppierungsspalten
  • Gruppenspalten haben kein Datenmodell, sodass sie ebenfalls nicht sortiert, gefiltert usw. werden können und dazu dienen, andere Spalten zusammenzufassen. Es ist üblich, eine Kopf- oder Fußzeile für eine Spaltengruppe zu definieren.

Obwohl Spaltendefinitionen letztendlich nur einfache Objekte sind, wird im Tabellenkern eine Funktion namens createColumnHelper bereitgestellt, die bei Aufruf mit einem Zeilentyp ein Dienstprogramm für die Erstellung verschiedener Spaltendefinitionstypen mit höchstmöglicher Typsicherheit zurückgibt.

Hier ist ein Beispiel für die Erstellung und Verwendung eines Spaltenhelfers

// Define your row shape
type Person = {
  firstName: string
  lastName: string
  age: number
  visits: number
  status: string
  progress: number
}

const columnHelper = createColumnHelper<Person>()

// Make some columns!
const defaultColumns = [
  // Display Column
  columnHelper.display({
    id: 'actions',
    cell: props => <RowActions row={props.row} />,
  }),
  // Grouping Column
  columnHelper.group({
    header: 'Name',
    footer: props => props.column.id,
    columns: [
      // Accessor Column
      columnHelper.accessor('firstName', {
        cell: info => info.getValue(),
        footer: props => props.column.id,
      }),
      // Accessor Column
      columnHelper.accessor(row => row.lastName, {
        id: 'lastName',
        cell: info => info.getValue(),
        header: () => <span>Last Name</span>,
        footer: props => props.column.id,
      }),
    ],
  }),
  // Grouping Column
  columnHelper.group({
    header: 'Info',
    footer: props => props.column.id,
    columns: [
      // Accessor Column
      columnHelper.accessor('age', {
        header: () => 'Age',
        footer: props => props.column.id,
      }),
      // Grouping Column
      columnHelper.group({
        header: 'More Info',
        columns: [
          // Accessor Column
          columnHelper.accessor('visits', {
            header: () => <span>Visits</span>,
            footer: props => props.column.id,
          }),
          // Accessor Column
          columnHelper.accessor('status', {
            header: 'Status',
            footer: props => props.column.id,
          }),
          // Accessor Column
          columnHelper.accessor('progress', {
            header: 'Profile Progress',
            footer: props => props.column.id,
          }),
        ],
      }),
    ],
  }),
]

// Define your row shape
type Person = {
  firstName: string
  lastName: string
  age: number
  visits: number
  status: string
  progress: number
}

const columnHelper = createColumnHelper<Person>()

// Make some columns!
const defaultColumns = [
  // Display Column
  columnHelper.display({
    id: 'actions',
    cell: props => <RowActions row={props.row} />,
  }),
  // Grouping Column
  columnHelper.group({
    header: 'Name',
    footer: props => props.column.id,
    columns: [
      // Accessor Column
      columnHelper.accessor('firstName', {
        cell: info => info.getValue(),
        footer: props => props.column.id,
      }),
      // Accessor Column
      columnHelper.accessor(row => row.lastName, {
        id: 'lastName',
        cell: info => info.getValue(),
        header: () => <span>Last Name</span>,
        footer: props => props.column.id,
      }),
    ],
  }),
  // Grouping Column
  columnHelper.group({
    header: 'Info',
    footer: props => props.column.id,
    columns: [
      // Accessor Column
      columnHelper.accessor('age', {
        header: () => 'Age',
        footer: props => props.column.id,
      }),
      // Grouping Column
      columnHelper.group({
        header: 'More Info',
        columns: [
          // Accessor Column
          columnHelper.accessor('visits', {
            header: () => <span>Visits</span>,
            footer: props => props.column.id,
          }),
          // Accessor Column
          columnHelper.accessor('status', {
            header: 'Status',
            footer: props => props.column.id,
          }),
          // Accessor Column
          columnHelper.accessor('progress', {
            header: 'Profile Progress',
            footer: props => props.column.id,
          }),
        ],
      }),
    ],
  }),
]

Datenspalten sind einzigartig, da sie so konfiguriert werden müssen, dass primitive Werte für jedes Element in Ihrem Datensatz extrahiert werden.

Dafür gibt es 3 Möglichkeiten

• Wenn Ihre Elemente Objekte sind, verwenden Sie einen Objektschlüssel, der dem Wert entspricht, den Sie extrahieren möchten.
• Wenn Ihre Elemente verschachtelte Arrays sind, verwenden Sie einen Array-Index, der dem Wert entspricht, den Sie extrahieren möchten.
• Verwenden Sie eine Zugriffsfunktion, die den Wert zurückgibt, den Sie extrahieren möchten.

Wenn jedes Ihrer Elemente ein Objekt mit der folgenden Form hat

type Person = {
  firstName: string
  lastName: string
  age: number
  visits: number
  status: string
  progress: number
}

type Person = {
  firstName: string
  lastName: string
  age: number
  visits: number
  status: string
  progress: number
}

Sie könnten den firstName-Wert wie folgt extrahieren

columnHelper.accessor('firstName')

// OR

{
  accessorKey: 'firstName',
}

columnHelper.accessor('firstName')

// OR

{
  accessorKey: 'firstName',
}

Wenn jedes Ihrer Elemente ein Array mit der folgenden Form hat

type Sales = [Date, number]

type Sales = [Date, number]

Sie könnten den number-Wert wie folgt extrahieren

columnHelper.accessor(1)

// OR

{
  accessorKey: 1,
}

columnHelper.accessor(1)

// OR

{
  accessorKey: 1,
}

Wenn jedes Ihrer Elemente ein Objekt mit der folgenden Form hat

type Person = {
  firstName: string
  lastName: string
  age: number
  visits: number
  status: string
  progress: number
}

type Person = {
  firstName: string
  lastName: string
  age: number
  visits: number
  status: string
  progress: number
}

Sie könnten einen berechneten vollständigen Namen wie folgt extrahieren

columnHelper.accessor(row => `${row.firstName} ${row.lastName}`, {
  id: 'fullName',
})

// OR

{
  id: 'fullName',
  accessorFn: row => `${row.firstName} ${row.lastName}`,
}

columnHelper.accessor(row => `${row.firstName} ${row.lastName}`, {
  id: 'fullName',
})

// OR

{
  id: 'fullName',
  accessorFn: row => `${row.firstName} ${row.lastName}`,
}

🧠 Denken Sie daran, dass der abgerufene Wert der Wert ist, der zum Sortieren, Filtern usw. verwendet wird. Sie sollten also sicherstellen, dass Ihre Zugriffsfunktion einen primitiven Wert zurückgibt, der auf sinnvolle Weise manipuliert werden kann. Wenn Sie einen nicht-primitiven Wert wie ein Objekt oder ein Array zurückgeben, benötigen Sie die entsprechenden Filter-/Sortier-/Gruppierungsfunktionen, um diese zu manipulieren, oder sogar eigene bereitzustellen! 😬

Spalten werden mit 3 Strategien eindeutig identifiziert

• Wenn Sie eine Zugriffsspalte mit einem Objektschlüssel oder einem Array-Index definieren, wird derselbe zur eindeutigen Identifizierung der Spalte verwendet.
  • Alle Punkte (.) in einem Objektschlüssel werden durch Unterstriche (_) ersetzt.
• Wenn Sie eine Zugriffsspalte mit einer Zugriffsfunktion definieren
  • Die Eigenschaft id der Spalte wird zur eindeutigen Identifizierung der Spalte verwendet ODER
  • Wenn ein primitiver String-Header bereitgestellt wird, wird dieser Header-String zur eindeutigen Identifizierung der Spalte verwendet

🧠 Eine einfache Eselsbrücke: Wenn Sie eine Spalte mit einer Zugriffsfunktion definieren, geben Sie entweder einen String-Header oder eine eindeutige Eigenschaft id an.

Standardmäßig zeigen Spaltenzellen ihren Datenmodellwert als String an. Sie können dieses Verhalten überschreiben, indem Sie benutzerdefinierte Rendering-Implementierungen bereitstellen. Jede Implementierung erhält relevante Informationen über die Zelle, Kopfzeile oder Fußzeile und gibt etwas zurück, das Ihr Framework-Adapter rendern kann (z. B. JSX/Komponenten/Strings usw.). Dies hängt vom verwendeten Adapter ab.

Es stehen Ihnen einige Formatierer zur Verfügung

• cell: Wird zur Formatierung von Zellen verwendet.
• aggregatedCell: Wird zur Formatierung von Zellen verwendet, wenn diese aggregiert sind.
• header: Wird zur Formatierung von Kopfzeilen verwendet.
• footer: Wird zur Formatierung von Fußzeilen verwendet.

Sie können einen benutzerdefinierten Zellenformatierer bereitstellen, indem Sie eine Funktion an die Eigenschaft cell übergeben und die Funktion props.getValue() verwenden, um auf den Wert Ihrer Zelle zuzugreifen.

columnHelper.accessor('firstName', {
  cell: props => <span>{props.getValue().toUpperCase()}</span>,
})

columnHelper.accessor('firstName', {
  cell: props => <span>{props.getValue().toUpperCase()}</span>,
})

Zellenformatierer erhalten auch die Objekte row und table, sodass Sie die Zellenformatierung über den reinen Zellenwert hinaus anpassen können. Das folgende Beispiel verwendet firstName als Zugriffsmerkmale, zeigt aber auch eine mit einem Präfix versehene Benutzer-ID an, die sich im ursprünglichen Zeilenobjekt befindet.

columnHelper.accessor('firstName', {
  cell: props => (
    <span>{`${props.row.original.id} - ${props.getValue()}`}</span>
  ),
})

columnHelper.accessor('firstName', {
  cell: props => (
    <span>{`${props.row.original.id} - ${props.getValue()}`}</span>
  ),
})

Weitere Informationen zu aggregierten Zellen finden Sie unter Gruppierung.

Kopf- und Fußzeilen haben keinen Zugriff auf Zeilendaten, verwenden aber dennoch dieselben Konzepte zur Anzeige benutzerdefinierter Inhalte.