Pytanie w sprawie kolorowania wierszy w DataGrid (ReactJS)

0

Dzień dobry,
mam tabele stworzoną za pomocą Datagrid.
screenshot-20221128230449.png

const kolumny = [
    { field: 'id', headerName: 'Nr zamówienia:', width: 120 },
    {
      field: 'kontrahent',
      headerName: 'Kontrahent:',
      width: 150,
      editable: false,
      align: 'left',
    },
    {
      field: 'telefon',
      headerName: 'Telefon:',
      width: 120,
      editable: false,
      align: 'left',
      valueFormatter: params =>
        format_telefonu(params?.value),

    },
    {
      field: 'ilosc',
      headerName: 'ILość:',
      type: 'number',
      width: 60,
      editable: false,
      align: 'left',
    },
    {
      field: 'data_zbioru',
      headerName: 'Data zbioru:',
      type: 'date',
      valueFormatter: params =>
        moment(params?.value).format("YYYY-MM-DD"),
      width: 120,
      editable: false,
    },
    {
        field: 'odebrane',
        headerName: 'REALIZACJA:',
        type: 'string',
    
        width: 150,
        editable: false,
      },
  ];

  const wiersz = pobierz_zlecenia.map(
    pozycja => ({
      id: pozycja.id,
      kontrahent_id: pozycja.kontrahent_id,
      kontrahent: pozycja.kontrahent_nazwa,
      telefon: pozycja.telefon,
      ilosc: pozycja.ilosc,     
      odebrane: pozycja.odebrane === 0 ? "NIE": "TAK"
    }))
  

Jak zrobić teraz aby wiersz który zawierał REALIZACJE na nie NIE miał kolor czerwony, a na TAK zielony.
Wiem że należy użyć getRowClassName, ale dostępne przykłady na React Material MUI jakoś nie przemawiają do mnie :)
Pozdrawiam,
Łukasz

0

Komponentów DataGrid dla JS jest na świecie pewnie ze sto tysięcy. Możesz przybliżyć nam jakiego Ty użyłeś?

1

https://mui.com/x/react-data-grid/style/

// Przykładowe kolumny
const columns = [
 { field: 'username' }, 
 { field: 'age' }
];

// Przykładowe wiersze
const rows = [
  {
    id: 1,
    username: 'Franek',
    age: 20,
  },
];

<DataGrid
  columns={columns}
  rows={rows}
  getRowClassName={(params) => {
    // Zawsze możesz sobie wyświetlić zmienną jeśli nie wiesz co w niej jest
    console.dir(params);

    // W zależności od warunku zwracasz odpowiednie klasy
    return params.row.age >= 18 
      ? 'adult'
      : 'child';
  }}
/>

1 użytkowników online, w tym zalogowanych: 0, gości: 1