# Создаем таблицу с данными
Теперь, давайте создадим наш каталог картин. Для этого заведем таблицу,
каждая строчка которой будет отдельной картиной.
В таблице укажем основные поля картины:
- название (title)
- изображение (image)
- материал (material)
- размеры (dimensions)
- цена (price)
Создаем таблицу прямо в нашем коде. Для этого, подключим в начале файла библиотеку Heap
```typescript
import {Heap} from '@app/heap'
```
и опишем таблицу. Обратите внимание, код описания таблицы должен быть над строчкой app.html (вне ее фигурных скобок)
```typescript
const catalogTable = Heap.Table('pictures', {
title: Heap.String(), // название. строка
image: Heap.ImageFile(), // изображение. обязательный
material: Heap.Optional( Heap.String() ), // материал. необязательный. строка.
dimensions: Heap.Optional( Heap.String() ), // размеры. необязательный. строка.
price: Heap.NonRequired( Heap.Number(),0 ), // цена. число. по умолчанию 0
})
```
Таким образом, мы определили таблицу картин.
Теперь давайте сразу занесем в нее строки. Для этого, над кодом объявления таблицы
находим ссылку "Show table pictures", находяющуюся над объявлением таблицы и нажимаем ее
Откроется пустая таблица, с колонками, которые мы объявили в коде.
Давайте наполним эту таблицу, введя в нее хотя-бы две записи.
Введите любые значения в поля title и image и нажмите кнопку "Подтверждения"
Удалось добавить? Отлично, теперь вы знаете как определять таблицы внутри кода. Можно двигаться дальше.
## Итоговый код
```typescript
import {jsx} from '@app/html-jsx'
import {Heap} from '@app/heap'
const catalogTable = Heap.Table('pictures', {
title: Heap.String(), // название. строка
image: Heap.ImageFile(), // изображение. обязательный
material: Heap.Optional( Heap.String() ), // материал. необязательный. строка.
dimensions: Heap.Optional( Heap.String() ), // размеры. необязательный. строка.
price: Heap.NonRequired( Heap.Number(),0 ), // цена. число. по умолчанию 0
})
app.html('/', async(ctx,req) => {
return
Каталог картин
Каталог картин
})
```
### Следующий шаг: [Переходим в VSCode](/docs/start/vscode)