Tanstack Table

När du behöver mer avancerade funktioner för tabeller rekommenderar vi att du använder Tanstack Table. Det är ett kraftfullt "headless"-verktyg, vilket innebär att det inte renderar någon markup eller stilar åt dig. Detta ger dig full kontroll över tabellens utseende, och vi har tillhandahållit stilar för att säkerställa att den matchar Midas utseende och känsla.

Stilarna för Tanstack Table är just nu i en tidig version och är ett arbete som pågår. Tanstack Table är inte en del av kärnbiblioteket i Midas, vilket innebär att supporten är begränsad. Vi är öppna för kodbidrag till vårt repo och tar gärna emot förslag på stilar som saknas när du implementerar Tanstack Table.

När du ska använda Tanstack Table

Använd Tanstack Table när du behöver funktioner som:

• Paginering
• Sortering
• Filtrering
• Radmarkering
• Kolumnordning
• Och mycket mer!

För enklare tabeller som inte kräver denna funktionalitet kan du använda den grundläggande Midas-tabellkomponenten.

Komma igång

För att använda Tanstack Table med Midas-stilar måste du först installera de nödvändiga beroendena:

npm install @tanstack/react-table

Importera sedan Midas-stilarna för tabellen:

@import '@midas-ds/table-styles/tanstack-table.css';

Använd class midas-tanstack-table:

<table className={'midas-tanstack-table'}>...</table>

Här är ett minimalt exempel för att komma igång:

import { useReactTable, getCoreRowModel, flexRender, ColumnDef } from '@tanstack/react-table'
import '@midas-ds/table-styles/tanstack-table.css'

type Person = {
  name: string
  age: number
}

const columns: ColumnDef<Person>[] = [
  { accessorKey: 'name', header: 'Namn' },
  { accessorKey: 'age', header: 'Ålder' },
]

const data: Person[] = [
  { name: 'Anna', age: 28 },
  { name: 'Erik', age: 35 },
]

function MyTable() {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  })

  return (
    <table className='midas-tanstack-table'>
      <thead>
        {table.getHeaderGroups().map(headerGroup => (
          <tr key={headerGroup.id}>
            {headerGroup.headers.map(header => (
              <th key={header.id}>{flexRender(header.column.columnDef.header, header.getContext())}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody>
        {table.getRowModel().rows.map(row => (
          <tr key={row.id}>
            {row.getVisibleCells().map(cell => (
              <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  )
}

Användbara länkar

Här är några resurser som hjälper dig att komma igång med TanStack Table:

• TanStack Table v8 Docs: Den officiella dokumentationen är den bästa platsen att lära sig om alla funktioner och hur man använder dem.
• Exempel: En stor samling exempel som visar hur man implementerar olika funktioner.

Exempel

Filtrering

Tanstack Table har inbyggt stöd för filtrering med getFilteredRowModel. Du kan använda alla standardformulärkomponenter från Midas för att skapa filterkontrollen.

Sök på namn

Avdelning

Alla avdelningar

Alla avdelningarTeknikMarknadsföringHRFörsäljningEkonomi

Status

Alla statusar

Alla statusarAktivInaktivVäntande

ID	Förnamn	Efternamn	E-post	Avdelning	Status
1	Anna	Andersson	anna.andersson@example.com	Engineering	Active
2	Erik	Eriksson	erik.eriksson@example.com	Marketing	Active
3	Maria	Svensson	maria.svensson@example.com	HR	Inactive
4	Lars	Larsson	lars.larsson@example.com	Sales	Active
5	Karin	Nilsson	karin.nilsson@example.com	Engineering	Pending
6	Johan	Johansson	johan.johansson@example.com	Finance	Active
7	Emma	Karlsson	emma.karlsson@example.com	Marketing	Inactive
8	Sofia	Pettersson	sofia.pettersson@example.com	Engineering	Pending

I detta exempel används:

• globalFilter för textsökning över flera kolumner
• columnFilters för att filtrera på specifika kolumner
• getFilteredRowModel() för att hantera filtreringen

Läs mer om filtrering i Tanstack Table's dokumentation.

Kolumnsynlighet

Tanstack Table gör det enkelt att låta användare välja vilka kolumner som ska visas med columnVisibility state.

{
  table.getAllLeafColumns().map(column => (
    <Checkbox
      key={column.id}
      isSelected={column.getIsVisible()}
      onChange={isSelected => column.toggleVisibility(isSelected)}
    >
      {typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id}
    </Checkbox>
  ))
}

ID

Förnamn

Efternamn

E-post

Avdelning

Status

ID	Förnamn	Efternamn	E-post	Avdelning	Status
1	Anna	Andersson	anna.andersson@example.com	Engineering	Active
2	Erik	Eriksson	erik.eriksson@example.com	Marketing	Active
3	Maria	Svensson	maria.svensson@example.com	HR	Inactive
4	Lars	Larsson	lars.larsson@example.com	Sales	Active
5	Karin	Nilsson	karin.nilsson@example.com	Engineering	Pending
6	Johan	Johansson	johan.johansson@example.com	Finance	Active
7	Emma	Karlsson	emma.karlsson@example.com	Marketing	Inactive
8	Sofia	Pettersson	sofia.pettersson@example.com	Engineering	Pending

Kolumnsynlighet kan också läggas i en popover:

I detta exempel används:

• columnVisibility state för att hålla reda på vilka kolumner som är synliga
• column.getIsVisible() för att kontrollera om en kolumn är synlig
• column.getToggleVisibilityHandler() för att växla synlighet

Läs mer om kolumnsynlighet i Tanstack Table's dokumentation.