Having difficulty in vue.js with vue3-easy-data-table

I am using vue3-easy-data-table as a library for data table in my project.

link to library at github

There i have a logic with item statuses, which i get from api. So if item status is like "waiting for shipment" i want, for example, to make a red row background, and if another status - make white row background.

In examples at documentation link to library documentation for this library i see that there is a prop body-row-class-name and a function bodyRowClassNameFunction which determines what style should be appended to row according to some condition and returns a style name (in the code block below)

<template>
  <div>
    <EasyDataTable
      :headers="headers"
      :items="items"
      :header-item-class-name="headerItemClassNameFunction"
      :body-row-class-name="bodyRowClassNameFunction"
      :body-expand-row-class-name="bodyExpandRowClassNameFunction"
      :body-item-class-name="bodyItemClassNameFunction"
      no-hover
    >
      <template #expand="item">
        {{ item.name }} in {{ item.class }} got {{ item.score }}
      </template>
    </EasyDataTable>
  </div>
</template>

<script lang="ts" setup>
import { Header, Item, BodyRowClassNameFunction, HeaderItemClassNameFunction, BodyItemClassNameFunction} from "vue3-easy-data-table";

const bodyRowClassNameFunction: BodyRowClassNameFunction = (item: Item, rowNumber: number): string => {
  if (item.score < 60) return 'fail-row';
  return 'pass-row';
};

const bodyExpandRowClassNameFunction: BodyRowClassNameFunction = (item: Item, rowNumber: number): string => {
  return 'expand-row';
};

const bodyItemClassNameFunction: BodyItemClassNameFunction = (column: string, rowNumber: number): string => {
  if (column === 'score') return 'score-column';
  return '';
};

const headerItemClassNameFunction: HeaderItemClassNameFunction = (header: Header, columnNumber: number): string => {
  if (header.value === 'score') return 'score-column';
  return '';
};

const headers: Header[] = [
  { text: "Name", value: "name" },
  { text: "Class", value: "class" },
  { text: "Score", value: "score", sortable: true },
];

const items: Item[] = [
  {name: 'HC', class: 'class 1', score: 100},
  {name: 'Curry', class: 'class 2', score: 59},
  {name: 'James', class: 'class 3', score: 59},
  {name: 'Durant', class: 'class 3', score: 59},
];
</script>

<style>
.score-column {
  font-size: 20px;
}
.fail-row  {
  --easy-table-body-row-background-color: #f56c6c;
  --easy-table-body-row-font-color: #fff;
}
.pass-row  {
  --easy-table-body-row-background-color: #67c23a;
  --easy-table-body-row-font-color: #fff;
}
.expand-row {
  --easy-table-body-row-background-color: grey;
  --easy-table-body-row-font-color: #fff;
}
</style>

Maybe the problem is that this library examples is in typescript, but the project is not using it.

Could you please help if anything i can do to make it work without typescrypt? Why documented prop is not working?

Tnank you!!!

In my code i am trying a more simpler example to understand why some props doesnt works... I am pointing a style directly in body-row-class-name prop, but it is not working.

template block

imports

style block