Hoppa till huvudinnehåll

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.

Vilka versioner stöds​

@midas-ds/table-styles stödjer både TanStack Table v8 och v9 (^8.21.3 || ^9.0.0). DOM-strukturen är oförändrad mellan de två versionerna, så samma CSS-klasser och stilar fungerar oavsett vilken major du kör, det som skiljer sig är TanStacks eget JS/TS-API.

Det här är relevant att veta direkt: npms latest-tagg för @tanstack/react-table pekar just nu på v9, och det finns ingen separat v8-tagg. Det betyder att om du kör npm install @tanstack/react-table idag i ett nytt projekt får du v9, inte v8. Har du redan ett projekt med v8 installerat påverkas du inte, den versionen fortsätter fungera precis som förut.

  • Ny installation idag → v9. Använd useTable-syntaxen i Komma igång nedan.
  • Befintligt projekt på v8 → v8. Använd useReactTable-syntaxen, som även är den som de färdiga exemplen längre ner på sidan är skrivna med.

Vill du behålla din befintliga v8-kod men ändå köra på v9 internt finns TanStacks egen @tanstack/react-table/legacy-export med en useLegacyTable-hook som är API-kompatibel med v8. Se TanStacks migreringsguide för fler detaljer kring vad som skiljer v8 och v9 åt.

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 @midas-ds/table-styles

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. Detta är v9-syntaxen, den du får om du installerar @tanstack/react-table från scratch idag:

import {
  useTable, // v8: useReactTable
  tableFeatures, // v9-only: builds the feature set passed to useTable
  coreTablesFeature, // v9-only: base feature that's always required
  createCoreRowModel, // v8: getCoreRowModel, but not called directly on the table config here
  flexRender,
  type ColumnDef,
} from '@tanstack/react-table'
import '@midas-ds/table-styles/tanstack-table.css'

// v9-only: v8 instead passes getCoreRowModel: getCoreRowModel() directly to useReactTable
const features = tableFeatures({
  coreTablesFeature,
  coreRowModel: createCoreRowModel(),
})

type Person = {
  name: string
  age: number
}

// v9: ColumnDef also takes features as its first type parameter, v8 only takes <Person>
const columns: ColumnDef<typeof features, Person>[] = [
  { accessorKey: 'name', header: 'Namn' },
  { accessorKey: 'age', header: 'Ålder' },
]

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

function MyTable() {
  const table = useTable({
    features, // v9-only: see above
    data,
    columns,
  })

  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>
  )
}

Är du på v8?​

Om ditt projekt redan har @tanstack/react-table@8 installerat fungerar table-styles precis likadant, bara med v8:s useReactTable-syntax istället. Det är också den syntaxen som används i alla de färdiga exemplen längre ner på sidan.

// v9: useTable + tableFeatures/coreTablesFeature/createCoreRowModel (see the v9 example above)
import { useReactTable, getCoreRowModel, flexRender, ColumnDef } from '@tanstack/react-table'
import '@midas-ds/table-styles/tanstack-table.css'

type Person = {
  name: string
  age: number
}

// v9: ColumnDef<typeof features, Person>
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,
    // v9: the row model is registered separately via tableFeatures, not inline here
    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-dokumentation: Den officiella dokumentationen för v9 (latest) ä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.
  • Sitter du kvar på v8? Ingen fara, v8-dokumentationen finns kvar och underhålls separat av TanStack.

Exempel​

Exemplen nedan är skrivna med v8:s useReactTable-syntax (se Är du på v8? ovan). Är du på v9 gäller samma hook-anrop (getSortedRowModel, getFilteredRowModel, column.getToggleSortingHandler() och så vidare), du byter bara ut useReactTable mot useTable och registrerar features via tableFeatures.

Paginering​

Midas erbjuder en färdig komponent som jackar in i Tanstack tables API för paginering.

import { Pagination } from '@midas-ds/table-styles'
const table = useReactTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
  getPaginationRowModel: getPaginationRowModel(),
  initialState: {
    pagination: {
      pageIndex: 0,
      pageSize: 10,
    },
  },
})

const {
  pagination: { pageIndex, pageSize },
} = table.getState()


return (
  <table>
  ...
  </table>
 <Pagination
    getCanNextPage={table.getCanNextPage}
    getCanPreviousPage={table.getCanPreviousPage}
    getPageCount={table.getPageCount}
    getRowCount={table.getRowCount}
    nextPage={table.nextPage}
    pageIndex={pageIndex}
    pageSize={pageSize}
    previousPage={table.previousPage}
    setPageIndex={table.setPageIndex}
    setPageSize={table.setPageSize}
  />
)
ID
Name
Email
Age
1Person 1person1@example.com20
2Person 2person2@example.com21
3Person 3person3@example.com22
4Person 4person4@example.com23
5Person 5person5@example.com24
6Person 6person6@example.com25
7Person 7person7@example.com26
8Person 8person8@example.com27
9Person 9person9@example.com28
10Person 10person10@example.com29
1 - 10 of 100 rows
of 10 pages

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

Sortering​

Tanstack Table har inbyggt stöd för sortering med getSortedRowModel. Klicka på kolumnrubrikerna för att sortera tabellen.

ID
Förnamn
Efternamn
Mejladress
Avdelning
Status
0BettyGerlachWilford_West58@gmail.comHRInactive
1MadilynMuellerLavonne.Schmitt89@hotmail.comHRActive
2SallyLynchAddison.Feeney@hotmail.comHRInactive
3KendraZulaufBart.Kuhlman48@yahoo.comSalesPending
4DestinSimonisTriston45@gmail.comMarketingInactive
5CharleyAbbottShaniya_Beatty87@yahoo.comHRInactive
6BryantSmithAurore33@yahoo.comEngineeringPending
7MakennaHilpertGeoffrey_Gottlieb14@gmail.comHRPending
8DedrickKuhnDane62@gmail.comFinancePending
9RandallHegmannLucio_Windler@gmail.comEngineeringActive
10KyleeKassulkeJordan_Veum79@hotmail.comEngineeringPending
11KaylinMitchellEricka9@yahoo.comHRPending
12DovieO'KeefeBianka_Ernser@hotmail.comMarketingInactive
13OranJonesTristian.Christiansen55@gmail.comSalesInactive
14JohnathonAbshire-TowneReyes.Ortiz12@hotmail.comSalesPending
15JuneHaleyVance_Macejkovic89@yahoo.comEngineeringInactive
16LizethBeahanHassie.Ritchie55@hotmail.comEngineeringInactive
17RobbieKassulkeTimothy86@gmail.comSalesActive
18JefferyHellerSimon_Conroy95@yahoo.comFinanceActive
19EthelMoorePercy.Bayer@hotmail.comEngineeringPending
20PhilipHickleGunner_Jakubowski@yahoo.comHRPending
21TyshawnOrtizMarilou_Halvorson23@yahoo.comMarketingPending
22RosemarieHellerJorge65@yahoo.comFinancePending
23PriceVonDemetris7@yahoo.comHRActive
24AnnaSmithWilburn.Green87@hotmail.comHRPending
25DakotaOkunevaKiera.Christiansen38@hotmail.comSalesActive
26BethSipesEliane30@yahoo.comSalesPending
27CliftonDenesikHector_Greenfelder@gmail.comHRInactive
28FeliciaGreenJaylen_Raynor@hotmail.comMarketingActive
29CletaSchummRubye_Bechtelar64@gmail.comSalesPending
30AbnerKonopelskiCalvin.Lowe@hotmail.comFinanceActive
31LanaBeahanLoretta.Berge@gmail.comEngineeringPending

I detta exempel används:

  • sorting state för att hålla reda på vilka kolumner som är sorterade och i vilken riktning
  • getSortedRowModel() för att hantera sorteringen
  • column.getToggleSortingHandler() för att växla sorteringsriktning vid klick
  • column.getIsSorted() för att visa rätt sorteringsikon
  • ArrowUp, ArrowDown, och ArrowUpDown från lucide-react som sorteringsindikatorer
  • Klasserna sortable-header och sort-icon-neutral för att få rätt hover-beteende

Viktigt att notera: Sorteringsikonen (ArrowUpDown) är dold som standard och visas automatiskt vid hover tack vare stilarna i tanstack-table.css. När en kolumn är sorterad visas ArrowUp eller ArrowDown istället.

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

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.

IDFörnamnEfternamnMejladressAvdelningStatus
0BettyGerlachWilford_West58@gmail.comHRInactive
1MadilynMuellerLavonne.Schmitt89@hotmail.comHRActive
2SallyLynchAddison.Feeney@hotmail.comHRInactive
3KendraZulaufBart.Kuhlman48@yahoo.comSalesPending
4DestinSimonisTriston45@gmail.comMarketingInactive
5CharleyAbbottShaniya_Beatty87@yahoo.comHRInactive
6BryantSmithAurore33@yahoo.comEngineeringPending
7MakennaHilpertGeoffrey_Gottlieb14@gmail.comHRPending
8DedrickKuhnDane62@gmail.comFinancePending
9RandallHegmannLucio_Windler@gmail.comEngineeringActive
10KyleeKassulkeJordan_Veum79@hotmail.comEngineeringPending
11KaylinMitchellEricka9@yahoo.comHRPending
12DovieO'KeefeBianka_Ernser@hotmail.comMarketingInactive
13OranJonesTristian.Christiansen55@gmail.comSalesInactive
14JohnathonAbshire-TowneReyes.Ortiz12@hotmail.comSalesPending
15JuneHaleyVance_Macejkovic89@yahoo.comEngineeringInactive
16LizethBeahanHassie.Ritchie55@hotmail.comEngineeringInactive
17RobbieKassulkeTimothy86@gmail.comSalesActive
18JefferyHellerSimon_Conroy95@yahoo.comFinanceActive
19EthelMoorePercy.Bayer@hotmail.comEngineeringPending
20PhilipHickleGunner_Jakubowski@yahoo.comHRPending
21TyshawnOrtizMarilou_Halvorson23@yahoo.comMarketingPending
22RosemarieHellerJorge65@yahoo.comFinancePending
23PriceVonDemetris7@yahoo.comHRActive
24AnnaSmithWilburn.Green87@hotmail.comHRPending
25DakotaOkunevaKiera.Christiansen38@hotmail.comSalesActive
26BethSipesEliane30@yahoo.comSalesPending
27CliftonDenesikHector_Greenfelder@gmail.comHRInactive
28FeliciaGreenJaylen_Raynor@hotmail.comMarketingActive
29CletaSchummRubye_Bechtelar64@gmail.comSalesPending
30AbnerKonopelskiCalvin.Lowe@hotmail.comFinanceActive
31LanaBeahanLoretta.Berge@gmail.comEngineeringPending

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>
  ))
}
IDFörnamnEfternamnMejladressAvdelningStatus
0BettyGerlachWilford_West58@gmail.comHRInactive
1MadilynMuellerLavonne.Schmitt89@hotmail.comHRActive
2SallyLynchAddison.Feeney@hotmail.comHRInactive
3KendraZulaufBart.Kuhlman48@yahoo.comSalesPending
4DestinSimonisTriston45@gmail.comMarketingInactive
5CharleyAbbottShaniya_Beatty87@yahoo.comHRInactive
6BryantSmithAurore33@yahoo.comEngineeringPending
7MakennaHilpertGeoffrey_Gottlieb14@gmail.comHRPending
8DedrickKuhnDane62@gmail.comFinancePending
9RandallHegmannLucio_Windler@gmail.comEngineeringActive
10KyleeKassulkeJordan_Veum79@hotmail.comEngineeringPending
11KaylinMitchellEricka9@yahoo.comHRPending
12DovieO'KeefeBianka_Ernser@hotmail.comMarketingInactive
13OranJonesTristian.Christiansen55@gmail.comSalesInactive
14JohnathonAbshire-TowneReyes.Ortiz12@hotmail.comSalesPending
15JuneHaleyVance_Macejkovic89@yahoo.comEngineeringInactive
16LizethBeahanHassie.Ritchie55@hotmail.comEngineeringInactive
17RobbieKassulkeTimothy86@gmail.comSalesActive
18JefferyHellerSimon_Conroy95@yahoo.comFinanceActive
19EthelMoorePercy.Bayer@hotmail.comEngineeringPending
20PhilipHickleGunner_Jakubowski@yahoo.comHRPending
21TyshawnOrtizMarilou_Halvorson23@yahoo.comMarketingPending
22RosemarieHellerJorge65@yahoo.comFinancePending
23PriceVonDemetris7@yahoo.comHRActive
24AnnaSmithWilburn.Green87@hotmail.comHRPending
25DakotaOkunevaKiera.Christiansen38@hotmail.comSalesActive
26BethSipesEliane30@yahoo.comSalesPending
27CliftonDenesikHector_Greenfelder@gmail.comHRInactive
28FeliciaGreenJaylen_Raynor@hotmail.comMarketingActive
29CletaSchummRubye_Bechtelar64@gmail.comSalesPending
30AbnerKonopelskiCalvin.Lowe@hotmail.comFinanceActive
31LanaBeahanLoretta.Berge@gmail.comEngineeringPending
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.

Drag and Drop-kolumner​

Med hjälp av @dnd-kit kan du låta användare ordna om kolumner genom att dra och släppa dem. Detta ger en intuitiv och användarvänlig upplevelse för att anpassa tabellens layout.

Först, installera de nödvändiga beroendena:

npm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities @dnd-kit/modifiers
ID
Förnamn
Efternamn
Mejladress
Avdelning
Status
0BettyGerlachWilford_West58@gmail.comHRInactive
1MadilynMuellerLavonne.Schmitt89@hotmail.comHRActive
2SallyLynchAddison.Feeney@hotmail.comHRInactive
3KendraZulaufBart.Kuhlman48@yahoo.comSalesPending
4DestinSimonisTriston45@gmail.comMarketingInactive
5CharleyAbbottShaniya_Beatty87@yahoo.comHRInactive
6BryantSmithAurore33@yahoo.comEngineeringPending
7MakennaHilpertGeoffrey_Gottlieb14@gmail.comHRPending
8DedrickKuhnDane62@gmail.comFinancePending
9RandallHegmannLucio_Windler@gmail.comEngineeringActive
10KyleeKassulkeJordan_Veum79@hotmail.comEngineeringPending
11KaylinMitchellEricka9@yahoo.comHRPending
12DovieO'KeefeBianka_Ernser@hotmail.comMarketingInactive
13OranJonesTristian.Christiansen55@gmail.comSalesInactive
14JohnathonAbshire-TowneReyes.Ortiz12@hotmail.comSalesPending
15JuneHaleyVance_Macejkovic89@yahoo.comEngineeringInactive
16LizethBeahanHassie.Ritchie55@hotmail.comEngineeringInactive
17RobbieKassulkeTimothy86@gmail.comSalesActive
18JefferyHellerSimon_Conroy95@yahoo.comFinanceActive
19EthelMoorePercy.Bayer@hotmail.comEngineeringPending
20PhilipHickleGunner_Jakubowski@yahoo.comHRPending
21TyshawnOrtizMarilou_Halvorson23@yahoo.comMarketingPending
22RosemarieHellerJorge65@yahoo.comFinancePending
23PriceVonDemetris7@yahoo.comHRActive
24AnnaSmithWilburn.Green87@hotmail.comHRPending
25DakotaOkunevaKiera.Christiansen38@hotmail.comSalesActive
26BethSipesEliane30@yahoo.comSalesPending
27CliftonDenesikHector_Greenfelder@gmail.comHRInactive
28FeliciaGreenJaylen_Raynor@hotmail.comMarketingActive
29CletaSchummRubye_Bechtelar64@gmail.comSalesPending
30AbnerKonopelskiCalvin.Lowe@hotmail.comFinanceActive
31LanaBeahanLoretta.Berge@gmail.comEngineeringPending

I detta exempel används:

  • columnOrder state för att hålla reda på ordningen av kolumnerna
  • DndContext för att hantera drag and drop-funktionalitet
  • SortableContext för att göra kolumner sorterbara
  • useSortable hook för att göra individuella kolumner draggbara
  • arrayMove från @dnd-kit/sortable för att ordna om kolumnerna
  • GripVertical från lucide-react som drag-ikon som visas vid hover
  • Klassen drag-handle för att få rätt hover-beteende

Viktigt att notera: Drag-ikonen är dold som standard och visas automatiskt vid hover över kolumnrubriken tack vare stilarna i tanstack-table.css.

Läs mer om column ordering i Tanstack Table's dokumentation.