DataGrid

Eksempler

Retningslinjer

Riktig oppsett

1) Bruk stabil rad-id

Bruk alltid getRowId-prop når data kan endre rekkefølge, filtreres, pagineres etc. Da blir rendring, sortering, ekspandering og valg mer stabilt og ytelsen blir preservert.

2) Velg riktig layout

Hvis du kombinerer layout="auto" med settings.truncateContent, må celler som skal trunkeres få en eksplisitt maksbredde.

3) Radklikk vs. valg

Hvis tabellen har en handling (onRowAction) bør du ofte bruke selectionTrigger="control" slik at radklikk og -valg ikke konkurrerer om samme interaksjon.

I de tilfellene du ønsker mer kontroll kan du kansellere “eventet” slik at raden ikke blir valgt.

onRowAction={({event}) => event.preventDefault()}

Ytelse

Loading- og empty-state

DataGrid håndterer annonsering for loading-varianter. Velg en variant som passer visningen:

For tilfeller der ingen data er tilgjengelig, f. eks. ved filtrering, bør emptyContent brukes for å forteller brukeren om dette. Eksempler:

Figma

Komponenten i Figma er også i preview. Du må regne med at komponenten vil utforske utseende og funksjonalitet som ikke er i kode.

Tilgjengelighet

Bruk rad-overskrift

Sett isRowHeader: true på kolonnen som identifiserer raden. Dette gjør tabellen lettere å forstå ved skjermlesernavigasjon. Dette bør i de fleste tilfeller bare være én kolonne.

API

Data

data: RowT[];

Dataen som DataGrid og tabellen skal vise. Denne listen bør matche typen du gir til DataGrid.Columns<…>, men kan i praksis være en liste med arbitrær data.

Pass på at data bare endres når du ønsker at tabellen skal oppdateres. Hvis data-listen blir opprettet som et nytt objekt ved andre “state”-oppdateringer, vil dette føre til mye ekstra prosessering. I mindre tabeller vil dette ikke merkes, men kan raskt ha en effekt i større tabeller.

Columns

Kolonne-definisjonen har ansvar for å bygge opp data-modellen tabellen baserer seg på.

type PersonT = {
  fistName: string;
  lastName: string;
  age: number;
  status: string;
}

const columns: DataGrid.Columns<PersonT> = [
  {
    id: "firstName",
    isRowHeader: true,
    header: "Navn",
    bodyCell: ({ firstName }) => firstName,
  },
  {
    id: "lastName",
    header: "Etternavn",
    bodyCell: ({ lastName }) => lastName,
  },
  {
    id: "age",
    header: "Alder",
    bodyCell: ({ age }) => `${age} år`,
    align: "right"
  },
  {
    id: "status",
    header: "Status",
    bodyCell: ({ status }) => <Tag>{status}</Tag>,
  },
]

getRowId

Hvis getRowId ikke er satt brukes radindeks som fallback. Det fungerer for statiske lister, men gir ofte dårligere stabilitet og ytelse når data endrer rekkefølge.
Vi anbefaler derfor å bruke getRowId i de fleste tilfeller.

getRowId?: (rowData: RowT) => string;

...

<DataGrid getRowId={(row) => row.id} columns={columns} data={data}>
  <DataGrid.Table />
</DataGrid>

Sortering

For å sortere rader basert på én eller flere kolonner må du

sorting: {
  sortOrder?: {
    columnId: string;
    direction: "asc" | "desc";
  }[];
  defaultSortOrder?: {
    columnId: string;
    direction: "asc" | "desc";
  }[];
  onSortOrderChange?: (
    sortOrder: {
      columnId: string;
      direction: "asc" | "desc";
    }[],
    detail: {
      columnId: string;
      direction: "asc" | "desc" | "none";
    },
  ) => void;
  allowMultiSort?: boolean;
};

Merk at som standard er allowMultiSort={true}, slik at bruker kan sortere basert på flere kolonner samtidig ved å holde inne Shift og klikke på sorteringsknappen.

Vi ønsker etter hvert å bygge inn sortering slik at du ikke vil trenge å håndtere sorteringslogikken selv.

Props