Table

Входные параметры

Принимает массив объектов data[…] с абсолютно любыми ключами

Зарезервированные ключи в объектах: name, title, image, img, photo, price

interface Props {
  data: any[];
  head?: string[];
  headClasses?: string;
  popupText?: string | HTMLElement;
  imageClasses?: string;
  imageWidth?: number;
  imageHeight?: number;
  tableLoyoutFixed?: boolean;
  lightbox?: boolean;
  lightboxId?: string;
}

Использование

---
import Table from '@/blocks/table/Table.astro';

const tableData = [
    {
        image: 'https://cdn.alexsab.ru/models/default-model-bg.webp',
        name: 'GAC GS3',
        engine: '1.5 AMT 170 л.с.',
        price: 'от 2 490 000 ₽',
    },
    {
        image: 'https://cdn.alexsab.ru/models/default-model-bg.webp',
        name: 'Geely Coolray',
        engine: '1.5 AMT 150 л.с.',
        price: 'от 1 990 000 ₽',
    }
];

const tableData2 = [
    {
        name: 'GAC GS3',
        price: 'от 2 490 000 ₽',
    },
    {
        name: 'Geely Coolray',
        price: 'от 1 990 000 ₽',
    },
    {
        name: 'Haval Jolion',
        price: 'от 2 190 000 ₽',
    }
];

const tableHead = ['Фото', 'Модель', 'Двигатель', 'Цена'];
---

<section>
    <div class="container">
        <h2 class="text-xl sm:text-4xl font-medium mb-14">Таблица c "попапами"</h2>

        <Table 
            data={tableData} 
            head={tableHead}
            lightbox={true}
            lightboxId="cars-gallery"
            popupText="Модель"
        />

        <h2 class="text-xl sm:text-4xl font-medium my-14">Обычная таблица c "table-fixed"</h2>

        <Table 
            data={tableData2}
            tableLoyoutFixed={true}
        />

    </div>
</section>