@max-ts/components 0.0.2

package/src/components/DataGrid/DataGrid.stories.tsx

@@ -0,0 +1,1882 @@
+import type { Meta } from '@storybook/react';
+import { type ChangeEvent, useEffect, useMemo, useState } from 'react';
+
+import { ConfigProvider } from '../ConfigProvider';
+import {
+	DataGridActionCell,
+	type DataGridActionCellProps,
+	type DataGridActions,
+} from '../DataGridActionCell';
+import { DataGridPagination } from '../DataGridPagination';
+
+import { Eye, Pencil, Send, Trash } from 'lucide-react';
+import { DataGrid } from './DataGrid';
+import {
+	makeColumns,
+	makeDataList,
+	makeDataListWithTree,
+	makeRandomDate,
+} from './faker';
+import type {
+	DataGridColumns,
+	DataGridRowWithOptions,
+	DataGridSort,
+} from './types';
+
+const errorIllustration = '../../illustrations/error.svg';
+
+/**
+ * DataGrid — отображает информацию в удобном для просмотра виде. Может включать:
+ - Соответствующую визуализацию
+ - Навигацию
+ - Инструменты для запроса и обработки данных
+ *
+ */
+const meta: Meta<typeof DataGrid> = {
+	title: 'Components/Data Display/DataGrid',
+	component: DataGrid,
+};
+
+export default meta;
+
+type DataType = {
+	id: string;
+	documentName: string;
+	recipient: string;
+	createDate: string;
+	actions?: object;
+};
+
+type SortField = 'documentName' | 'recipient' | 'createDate';
+
+const FAKE_DATA_TEMPLATE: DataType = {
+	id: '1',
+	documentName: 'Договор №1',
+	recipient: 'ИП Иванов О.В.',
+	createDate: '2022-03-24T17:50:40.206Z',
+};
+
+const FAKE_ACTIONS: DataGridActions<DataType> = {
+	main: [
+		{
+			icon: <Eye />,
+			name: 'Просмотреть',
+			onClick: () => console.log('main'),
+			isBlockingOperation: true,
+		},
+		{
+			icon: <Send />,
+			nested: true,
+			name: 'Отправить',
+			actions: [
+				{ name: 'Туда', onClick: () => console.log('nested 1') },
+				{ name: 'Сюда', onClick: () => console.log('nested 2') },
+			],
+		},
+	],
+	secondary: [
+		{ name: 'Редактировать', onClick: () => console.log('secondary 1') },
+		{ name: 'Удалить', onClick: () => console.log('secondary 2') },
+	],
+};
+
+const FAKE_COLUMNS: DataGridColumns<DataType>[] = [
+	{
+		field: 'documentName',
+		label: 'Наименование документа',
+		sortable: true,
+	},
+	{
+		field: 'recipient',
+		label: 'Получатель',
+		sortable: true,
+	},
+	{
+		field: 'createDate',
+		label: 'Дата создания',
+		sortable: true,
+		format: ({ createDate }) => new Date(createDate).toLocaleDateString(),
+	},
+	{
+		field: 'actions',
+		label: 'Действия',
+		sortable: false,
+		align: 'center',
+		width: '120px',
+		renderCell: (row) => {
+			return <DataGridActionCell actions={FAKE_ACTIONS} row={row} />;
+		},
+	},
+];
+
+type FakeActionCellProps<TRow> = Pick<DataGridActionCellProps<TRow>, 'row'>;
+
+/**
+ * DataGrid без пагинации
+ */
+export const Example = () => {
+	const columns = makeColumns(FAKE_COLUMNS);
+	const fakeData: DataGridRowWithOptions<DataType>[] = [
+		{
+			id: '123456789',
+			documentName: 'Договор №12345678',
+			recipient: 'ПАО "Первый завод"',
+			createDate: makeRandomDate(),
+		},
+		...makeDataList(FAKE_DATA_TEMPLATE),
+	];
+
+	const [isLoading, setLoading] = useState(true);
+	const [slicedData, setSlicedData] = useState<DataType[]>([]);
+
+	useEffect(() => {
+		setTimeout(() => {
+			setSlicedData(fakeData.slice(0, 10));
+			setLoading(false);
+		}, 1500);
+	}, []);
+
+	const handleRowClick = (row: DataType) => console.log('row clicked', row);
+
+	return (
+		<DataGrid<DataType, SortField>
+			keyId='id'
+			rows={slicedData}
+			columns={columns}
+			isLoading={isLoading}
+			onRowClick={handleRowClick}
+			onRetry={() => {}}
+		/>
+	);
+};
+
+/**
+ * Постраничное отображение данных в таблице.
+ * Внизу таблицы есть область, в которой слева отображается счетчик данных на странице из общего количества данных, справа - кнопки с нумерацией страниц таблицы для переключения между ними.
+ */
+export const WithPagination = () => {
+	const columns = makeColumns(FAKE_COLUMNS);
+	const fakeData: DataGridRowWithOptions<DataType>[] = [
+		{
+			id: '123456789',
+			documentName: 'Договор №12345678',
+			recipient: 'ПАО "Первый завод"',
+			createDate: makeRandomDate(),
+		},
+		...makeDataList(FAKE_DATA_TEMPLATE),
+	];
+
+	const [isLoading, setLoading] = useState(true);
+	const [slicedData, setSlicedData] = useState<DataType[]>([]);
+	const [page, setPage] = useState<number>(1);
+
+	useEffect(() => {
+		setTimeout(() => {
+			setSlicedData(fakeData.slice((page - 1) * 10, page * 10));
+			setLoading(false);
+		}, 1500);
+	}, []);
+
+	const handleChangePage = (
+		_event: ChangeEvent<unknown>,
+		newPage: number,
+	): void => {
+		setLoading(true);
+		setPage(newPage);
+
+		setTimeout(() => {
+			setLoading(false);
+			setSlicedData(fakeData.slice((newPage - 1) * 10, newPage * 10));
+		}, 1500);
+	};
+
+	const handleRowClick = (row: DataType) => console.log('row clicked', row);
+
+	return (
+		<DataGrid<DataType, SortField>
+			keyId='id'
+			rows={slicedData}
+			columns={columns}
+			isLoading={isLoading}
+			footer={
+				<DataGridPagination
+					rowsPerPage={10}
+					totalCount={fakeData.length}
+					onChange={handleChangePage}
+					page={page}
+				/>
+			}
+			onRowClick={handleRowClick}
+			onRetry={() => {}}
+		/>
+	);
+};
+
+/**
+ * DataGrid с сортировкой
+ */
+export const WithSorting = () => {
+	const columns = makeColumns(FAKE_COLUMNS);
+	const fakeData: DataGridRowWithOptions<DataType>[] = [
+		{
+			id: '123456789',
+			documentName: 'Договор №12345678',
+			recipient: 'ПАО "Первый завод"',
+			createDate: makeRandomDate(),
+		},
+		...makeDataList(FAKE_DATA_TEMPLATE),
+	];
+
+	const [isLoading, setLoading] = useState(true);
+	const [slicedData, setSlicedData] = useState<DataType[]>([]);
+	const [sorting, setSorting] = useState<DataGridSort<SortField>>();
+
+	useEffect(() => {
+		setTimeout(() => {
+			setSlicedData(fakeData.slice(0, 10));
+			setLoading(false);
+		}, 1500);
+	}, []);
+
+	const handleRowClick = (row: DataType) => console.log('row clicked', row);
+
+	const handleSort = (newSorting: DataGridSort<SortField> | undefined) => {
+		if (newSorting) {
+			const sortData = (
+				array: DataType[],
+				field: SortField,
+				sortOrder: 'asc' | 'desc',
+			) => {
+				const sortedArray = [...array];
+
+				sortedArray.sort((a, b) => {
+					const valueA = a[field];
+					const valueB = b[field];
+
+					if (valueA === valueB) {
+						return 0;
+					}
+
+					if (field === 'documentName') {
+						// Разделение текстовой и числовой частей
+						const regex = /([^\d]+)(\d+)/;
+						const matchA = valueA.match(regex);
+						const matchB = valueB.match(regex);
+
+						// Проверка на null
+						if (matchA === null || matchB === null) {
+							return 0;
+						}
+
+						const [, textA, numberA] = matchA;
+						const [, textB, numberB] = matchB;
+
+						const comparison =
+							textA.localeCompare(textB) || Number(numberA) - Number(numberB);
+
+						// Определение порядка сортировки
+						return sortOrder === 'desc' ? -1 * comparison : comparison;
+					}
+					// Если не сортируем по полю documentName, используем прежний код сортировки
+					if (valueA < valueB) {
+						return sortOrder === 'desc' ? 1 : -1;
+					}
+
+					if (valueA > valueB) {
+						return sortOrder === 'desc' ? -1 : 1;
+					}
+
+					return 0;
+				});
+
+				return sortedArray;
+			};
+
+			setSlicedData(sortData(slicedData, newSorting.fieldId, newSorting.sort));
+		} else {
+			setSlicedData(fakeData.slice(0, 10));
+		}
+
+		setSorting(newSorting);
+	};
+
+	return (
+		<DataGrid<DataType, SortField>
+			keyId='id'
+			rows={slicedData}
+			columns={columns}
+			isLoading={isLoading}
+			onSort={handleSort}
+			sorting={sorting}
+			onRowClick={handleRowClick}
+			onRetry={() => {}}
+		/>
+	);
+};
+
+/**
+ * Prop `activeRowId` позволяет отобразить активный ряд в таблице в зависимости от значения prop `keyId`
+ */
+export const WithActiveRow = () => {
+	const columns = makeColumns(FAKE_COLUMNS);
+	const fakeData: DataGridRowWithOptions<DataType>[] = [
+		{
+			id: '123456789',
+			documentName: 'Договор №12345678',
+			recipient: 'ПАО "Первый завод"',
+			createDate: makeRandomDate(),
+		},
+		...makeDataList(FAKE_DATA_TEMPLATE),
+	];
+
+	const [isLoading, setLoading] = useState(true);
+	const [slicedData, setSlicedData] = useState<DataType[]>([]);
+
+	useEffect(() => {
+		setTimeout(() => {
+			setSlicedData(fakeData.slice(0, 10));
+			setLoading(false);
+		}, 1500);
+	}, []);
+
+	const handleRowClick = (row: DataType) => console.log('row clicked', row);
+
+	return (
+		<DataGrid<DataType, SortField>
+			keyId='id'
+			activeRowId={'3'}
+			rows={slicedData}
+			columns={columns}
+			isLoading={isLoading}
+			onRowClick={handleRowClick}
+			onRetry={() => {}}
+		/>
+	);
+};
+
+/**
+ * В таблице может добавляться возможность выбора отдельных строк или всего списка значений посредством использования компонента checkbox.
+ * В страничном варинте таблицы при выборе checkbox в datagrid_header выбираются все значения на странице
+ */
+export const WithCheckbox = () => {
+	const columns = makeColumns(FAKE_COLUMNS);
+	const fakeData: DataGridRowWithOptions<DataType>[] = [
+		{
+			id: '123456789',
+			documentName: 'Договор №12345678',
+			recipient: 'ПАО "Первый завод"',
+			createDate: makeRandomDate(),
+		},
+		...makeDataList(FAKE_DATA_TEMPLATE),
+	];
+
+	const [slicedData, setSlicedData] = useState<DataType[]>([]);
+	const [selected, setSelected] = useState<DataType[]>([]);
+	const [isLoading, setLoading] = useState(true);
+
+	useEffect(() => {
+		setTimeout(() => {
+			setSlicedData(fakeData.slice(0, 10));
+			setLoading(false);
+		}, 1500);
+	}, []);
+
+	const handleRowClick = (row: DataType) => console.log('row clicked', row);
+
+	const handleSelect = (rows: DataType[]) => setSelected(rows);
+
+	return (
+		<DataGrid<DataType, SortField>
+			keyId='id'
+			rows={slicedData}
+			columns={columns}
+			isLoading={isLoading}
+			selectedRows={selected}
+			onSelectRow={handleSelect}
+			onRowClick={handleRowClick}
+			onRetry={() => {}}
+		/>
+	);
+};
+
+/**
+ * В качестве значения параметра width должны указываться явные единицы: `px`, `%`, `fr`.
+ * При использовании таких значений, как auto, max-content, min-content, которые автоматически подстраиваются под ширину содержимого, сетка может сломаться.
+ * Если значение не указано, то автоматически задается `1fr`
+ */
+export const WidthOptions = () => {
+	const columns = makeColumns(FAKE_COLUMNS, [
+		{
+			field: 'documentName',
+			width: '2fr',
+		},
+		{
+			field: 'recipient',
+			width: '1fr',
+		},
+		{
+			field: 'createDate',
+			width: '15%',
+		},
+	]);
+
+	const fakeData: DataGridRowWithOptions<DataType>[] = [
+		{
+			id: '123456789',
+			documentName: 'Договор №12345678',
+			recipient: 'ПАО "Первый завод"',
+			createDate: makeRandomDate(),
+		},
+		...makeDataList(FAKE_DATA_TEMPLATE),
+	];
+
+	const [slicedData, setSlicedData] = useState<DataType[]>([]);
+	const [isLoading, setLoading] = useState(true);
+
+	useEffect(() => {
+		setTimeout(() => {
+			setSlicedData(fakeData.slice(0, 10));
+			setLoading(false);
+		}, 1500);
+	}, []);
+
+	const handleRowClick = (row: DataType) => console.log('row clicked', row);
+
+	return (
+		<DataGrid<DataType, SortField>
+			keyId='id'
+			rows={slicedData}
+			columns={columns}
+			isLoading={isLoading}
+			onRowClick={handleRowClick}
+			onRetry={() => {}}
+		/>
+	);
+};
+
+export const ConfirmAction = () => {
+	const ACTIONS: DataGridActions<DataType> = {
+		main: [
+			{
+				icon: <Trash />,
+				name: 'Удалить',
+				needConfirm: true,
+				confirmText:
+					'Если вы удалите черновик, то черновик с такими же данными нужно будет создать заново. Удалить черновик из списка?',
+				confirmButtonProps: {
+					text: 'Да, удалить',
+					isAccented: true,
+				},
+				onClick: (row) => alert(`Delete: ${JSON.stringify(row)}`),
+			},
+		],
+	};
+
+	const columns = makeColumns(FAKE_COLUMNS, [
+		{
+			field: 'actions',
+			renderCell: (row) => {
+				return <DataGridActionCell actions={ACTIONS} row={row} />;
+			},
+		},
+	]);
+
+	const fakeData: DataGridRowWithOptions<DataType>[] = [
+		{
+			id: '123456789',
+			documentName: 'Договор №12345678',
+			recipient: 'ПАО "Первый завод"',
+			createDate: makeRandomDate(),
+		},
+		...makeDataList(FAKE_DATA_TEMPLATE),
+	];
+
+	const [slicedData, setSlicedData] = useState<DataType[]>([]);
+	const [selected, setSelected] = useState<DataType[]>([]);
+	const [isLoading, setLoading] = useState(true);
+
+	useEffect(() => {
+		setTimeout(() => {
+			setSlicedData(fakeData.slice(0, 10));
+			setLoading(false);
+		}, 1500);
+	}, []);
+
+	const handleRowClick = (row: DataType) => console.log('row clicked', row);
+
+	const handleSelect = (rows: DataType[]) => setSelected(rows);
+
+	return (
+		<DataGrid<DataType, SortField>
+			keyId='id'
+			rows={slicedData}
+			columns={columns}
+			isLoading={isLoading}
+			selectedRows={selected}
+			onSelectRow={handleSelect}
+			onRowClick={handleRowClick}
+			onRetry={() => {}}
+		/>
+	);
+};
+
+/**
+ * Prop `disabled` позволяет заблокировать контент
+ */
+export const WithDisabledContent = () => {
+	const columns = makeColumns(FAKE_COLUMNS);
+	const fakeData: DataGridRowWithOptions<DataType>[] = [
+		{
+			id: '123456789',
+			documentName: 'Договор №12345678',
+			recipient: 'ПАО "Первый завод"',
+			createDate: makeRandomDate(),
+		},
+		...makeDataList(FAKE_DATA_TEMPLATE),
+	];
+
+	const [slicedData, setSlicedData] = useState<DataType[]>([]);
+	const [isLoading, setLoading] = useState(true);
+
+	useEffect(() => {
+		setTimeout(() => {
+			setSlicedData(fakeData.slice(0, 10));
+			setLoading(false);
+		}, 1500);
+	}, []);
+
+	const handleRowClick = (row: DataType) => console.log('row clicked', row);
+
+	return (
+		<DataGrid<DataType, SortField>
+			keyId='id'
+			rows={slicedData}
+			columns={columns}
+			isLoading={isLoading}
+			isDisabled={true}
+			onRowClick={handleRowClick}
+			onRetry={() => {}}
+		/>
+	);
+};
+
+export const WithDisabledRow = () => {
+	const ACTIONS: DataGridActions<DataType> = {
+		main: [
+			{
+				icon: <Trash />,
+				name: 'Удалить',
+				onClick: () => console.log('delete'),
+			},
+		],
+	};
+
+	const columns = makeColumns(FAKE_COLUMNS, [
+		{
+			field: 'actions',
+			renderCell: (row) => {
+				return <DataGridActionCell actions={ACTIONS} row={row} />;
+			},
+		},
+	]);
+
+	const fakeData: DataGridRowWithOptions<DataType>[] = [
+		{
+			id: '123456789',
+			documentName: 'Договор №12345678',
+			recipient: 'ПАО "Первый завод"',
+			createDate: makeRandomDate(),
+			options: {
+				isDisabled: true,
+				disabledReason: 'Нет доступа',
+			},
+		},
+		...makeDataList(FAKE_DATA_TEMPLATE, {
+			isDisabled: true,
+			disabledReason: 'Нет доступа',
+		}),
+	];
+
+	const [slicedData, setSlicedData] = useState<DataType[]>([]);
+	const [selected, setSelected] = useState<DataType[]>([]);
+	const [isLoading, setLoading] = useState(true);
+
+	useEffect(() => {
+		setTimeout(() => {
+			setSlicedData(fakeData.slice(0, 10));
+			setLoading(false);
+		}, 1500);
+	}, []);
+
+	const handleRowClick = (row: DataType) => console.log('row clicked', row);
+
+	const handleSelect = (rows: DataType[]) => setSelected(rows);
+
+	return (
+		<DataGrid<DataType, SortField>
+			keyId='id'
+			rows={slicedData}
+			columns={columns}
+			isLoading={isLoading}
+			selectedRows={selected}
+			onSelectRow={handleSelect}
+			onRowClick={handleRowClick}
+			onRetry={() => {}}
+		/>
+	);
+};
+
+/**
+ * `isDisabledLastCell` позволяет не блокировать последнюю ячейку
+ */
+export const DisabledLastCell = () => {
+	const ACTIONS: DataGridActions<DataType> = {
+		main: [
+			{
+				icon: <Trash />,
+				name: 'Удалить',
+				onClick: () => console.log('delete'),
+			},
+		],
+	};
+
+	const columns = makeColumns(FAKE_COLUMNS, [
+		{
+			field: 'actions',
+			renderCell: (row) => {
+				return <DataGridActionCell actions={ACTIONS} row={row} />;
+			},
+		},
+	]);
+
+	const fakeData: DataGridRowWithOptions<DataType>[] = [
+		{
+			id: '123456789',
+			documentName: 'Договор №12345678',
+			recipient: 'ПАО "Первый завод"',
+			createDate: makeRandomDate(),
+			options: {
+				isDisabled: true,
+				isDisabledLastCell: false,
+				disabledReason: 'Нет доступа',
+			},
+		},
+		...makeDataList(FAKE_DATA_TEMPLATE, {
+			isDisabled: true,
+			isDisabledLastCell: false,
+			disabledReason: 'Нет доступа',
+		}),
+	];
+
+	const [slicedData, setSlicedData] = useState<DataType[]>([]);
+	const [selected, setSelected] = useState<DataType[]>([]);
+	const [isLoading, setLoading] = useState(true);
+
+	useEffect(() => {
+		setTimeout(() => {
+			setSlicedData(fakeData.slice(0, 10));
+			setLoading(false);
+		}, 1500);
+	}, []);
+
+	const handleRowClick = (row: DataType) => console.log('row clicked', row);
+
+	const handleSelect = (rows: DataType[]) => setSelected(rows);
+
+	return (
+		<DataGrid<DataType, SortField>
+			keyId='id'
+			rows={slicedData}
+			columns={columns}
+			isLoading={isLoading}
+			selectedRows={selected}
+			onSelectRow={handleSelect}
+			onRowClick={handleRowClick}
+			onRetry={() => {}}
+		/>
+	);
+};
+
+/**
+ * При состоянии `loading=true` и `isBlockingOperation=true` у действия, строка блокируется и появляется тултип с `loadingNote`
+ */
+export const ActionsDataGrid = () => {
+	const FakeActionCell = <TRow,>({ row }: FakeActionCellProps<TRow>) => {
+		const [isEditing, setIsEditing] = useState(false);
+		const [isDeleting, setIsDeleting] = useState(false);
+		const [isSigning, setIsSigning] = useState(false);
+
+		const handleEdit = () => {
+			setIsEditing(true);
+		};
+
+		const handleDelete = () => {
+			setIsDeleting(true);
+		};
+
+		const handleSign = () => {
+			setIsSigning(true);
+		};
+
+		useEffect(() => {
+			if (isEditing) {
+				setTimeout(() => setIsEditing(false), 1500);
+			}
+
+			if (isDeleting) {
+				setTimeout(() => setIsDeleting(false), 1500);
+			}
+
+			if (isSigning) {
+				setTimeout(() => setIsSigning(false), 1500);
+			}
+		}, [isEditing, isDeleting, isSigning]);
+
+		const fakeActions = useMemo(
+			() => ({
+				main: [
+					{
+						icon: <Pencil />,
+						name: 'Редактировать',
+						loading: isEditing,
+						onClick: handleEdit,
+					},
+					{
+						icon: <Trash />,
+						name: 'Удалить',
+						loading: isDeleting,
+						loadingNote: 'Происходит удаление',
+						isBlockingOperation: true,
+						onClick: handleDelete,
+					},
+				],
+				secondary: [
+					{
+						name: 'Подписать',
+						loading: isSigning,
+						loadingNote: 'Происходит подписание',
+						isBlockingOperation: true,
+						onClick: handleSign,
+					},
+				],
+			}),
+			[isEditing, isDeleting, isSigning],
+		);
+
+		return <DataGridActionCell actions={fakeActions} row={row} />;
+	};
+
+	const fakeColumns: DataGridColumns<DataType>[] = [
+		{
+			field: 'documentName',
+			label: 'Наименование документа',
+			sortable: true,
+		},
+		{
+			field: 'recipient',
+			label: 'Получатель',
+			sortable: true,
+		},
+		{
+			field: 'createDate',
+			label: 'Дата создания',
+			sortable: true,
+			format: ({ createDate }) => new Date(createDate).toLocaleDateString(),
+		},
+		{
+			field: 'actions',
+			label: 'Действия',
+			sortable: false,
+			align: 'center',
+			width: '120px',
+			renderCell: (row) => {
+				return <FakeActionCell row={row} />;
+			},
+		},
+	];
+
+	const columns = makeColumns(fakeColumns);
+
+	const fakeData: DataGridRowWithOptions<DataType>[] = [
+		{
+			id: '123456789',
+			documentName: 'Договор №12345678',
+			recipient: 'ПАО "Первый завод"',
+			createDate: makeRandomDate(),
+		},
+		...makeDataList(FAKE_DATA_TEMPLATE),
+	];
+
+	const [loading, setLoading] = useState(true);
+	const [slicedData, setSlicedData] = useState<DataType[]>([]);
+
+	useEffect(() => {
+		setTimeout(() => {
+			setSlicedData(fakeData.slice(0, 10));
+			setLoading(false);
+		}, 1500);
+	}, []);
+
+	const handleRowClick = (row: DataType) => console.log('row clicked', row);
+
+	return (
+		<DataGrid<DataType>
+			keyId='id'
+			rows={slicedData}
+			columns={columns}
+			onRowClick={handleRowClick}
+			isLoading={loading}
+			onRetry={() => {}}
+		/>
+	);
+};
+
+export const EmptyCellValue = () => {
+	type DataTypeEmptyCell = {
+		id: string;
+		documentName?: string;
+		recipient?: string;
+		createDate: string;
+	};
+
+	const fakeDataTemplate: DataTypeEmptyCell = {
+		id: '1',
+		documentName: 'Договор №1',
+		createDate: '2022-03-24T17:50:40.206Z',
+	};
+
+	const fakeColumns: DataGridColumns<DataTypeEmptyCell>[] = [
+		{
+			field: 'documentName',
+			label: 'Наименование документа',
+			sortable: true,
+		},
+		{
+			field: 'recipient',
+			label: 'Получатель',
+			sortable: true,
+		},
+		{
+			field: 'createDate',
+			label: 'Дата создания',
+			sortable: true,
+			format: ({ createDate }) => new Date(createDate).toLocaleDateString(),
+		},
+	];
+
+	const columns = makeColumns(fakeColumns);
+	const fakeData: DataGridRowWithOptions<DataTypeEmptyCell>[] = [
+		{
+			id: '123456789',
+			createDate: makeRandomDate(),
+		},
+		...makeDataList(fakeDataTemplate),
+	];
+
+	return (
+		<DataGrid<DataTypeEmptyCell>
+			keyId='id'
+			rows={fakeData}
+			columns={columns}
+			onRetry={() => {}}
+		/>
+	);
+};
+
+/**
+ * Таблица можем работать с вложенными структурами
+ */
+export const Tree = () => {
+	const ACTIONS: DataGridActions<DataType> = {
+		main: [
+			{
+				icon: <Trash />,
+				name: 'Удалить',
+				onClick: () => console.log('delete'),
+			},
+		],
+	};
+
+	const columns = makeColumns(FAKE_COLUMNS, [
+		{
+			field: 'actions',
+			renderCell: (row) => {
+				return <DataGridActionCell actions={ACTIONS} row={row} />;
+			},
+		},
+	]);
+
+	const fakeData: DataGridRowWithOptions<DataType>[] = [
+		{
+			id: '123456789',
+			documentName: 'Пакет документов',
+			recipient: 'ПАО "Первый завод"',
+			createDate: makeRandomDate(),
+			children: [
+				{
+					id: '1234567890',
+					documentName: 'Договор №12345678',
+					recipient: 'ПАО "Первый завод"',
+					createDate: makeRandomDate(),
+				},
+			],
+		},
+		...makeDataListWithTree(9),
+	];
+
+	const handleRowClick = (row: DataType) => console.log('row clicked', row);
+
+	return (
+		<DataGrid
+			keyId='id'
+			rows={fakeData}
+			columns={columns}
+			onRowClick={handleRowClick}
+			onRetry={() => {}}
+		/>
+	);
+};
+
+/**
+ * Использую пропс `tree` можно настраивать поведение таблицы при работе с древовидной структурой данных.
+ * Параметр `isInitialExpanded` позволяет раскрыть вложенные структуру при первичном отображении
+ */
+export const TreeWithInitialExpanded = () => {
+	const ACTIONS: DataGridActions<DataType> = {
+		main: [
+			{
+				icon: <Trash />,
+				name: 'Удалить',
+				onClick: () => console.log('delete'),
+			},
+		],
+	};
+
+	const columns = makeColumns(FAKE_COLUMNS, [
+		{
+			field: 'actions',
+			renderCell: (row) => {
+				return <DataGridActionCell actions={ACTIONS} row={row} />;
+			},
+		},
+	]);
+
+	const fakeData: DataGridRowWithOptions<DataType>[] = [
+		{
+			id: '123456789',
+			documentName: 'Пакет документов',
+			recipient: 'ПАО "Первый завод"',
+			createDate: makeRandomDate(),
+			children: [
+				{
+					id: '1234567890',
+					documentName: 'Договор №12345678',
+					recipient: 'ПАО "Первый завод"',
+					createDate: makeRandomDate(),
+				},
+			],
+		},
+		...makeDataListWithTree(9),
+	];
+
+	const handleRowClick = (row: DataType) => console.log('row clicked', row);
+
+	return (
+		<DataGrid
+			keyId='id'
+			rows={fakeData}
+			columns={columns}
+			tree={{
+				isInitialExpanded: true,
+			}}
+			onRowClick={handleRowClick}
+			onRetry={() => {}}
+		/>
+	);
+};
+
+/**
+ *  Используя пропс `expandedLevel` можно настраивать глубину раскрытия дерева при первичном отображении, если `isInitialExpanded=true`
+ */
+export const TreeWithExpandedLevel = () => {
+	const ACTIONS: DataGridActions<DataType> = {
+		main: [
+			{
+				icon: <Trash />,
+				name: 'Удалить',
+				onClick: () => console.log('delete'),
+			},
+		],
+	};
+
+	const columns = makeColumns(FAKE_COLUMNS, [
+		{
+			field: 'actions',
+			renderCell: (row) => {
+				return <DataGridActionCell actions={ACTIONS} row={row} />;
+			},
+		},
+	]);
+
+	const fakeData: DataGridRowWithOptions<DataType>[] = [
+		{
+			id: '123456789',
+			documentName: 'Пакет документов',
+			recipient: 'ПАО "Первый завод"',
+			createDate: makeRandomDate(),
+			children: [
+				{
+					id: '1234567890',
+					documentName: 'Договор №12345678',
+					recipient: 'ПАО "Первый завод"',
+					createDate: makeRandomDate(),
+				},
+			],
+		},
+		...makeDataListWithTree(9),
+	];
+
+	const handleRowClick = (row: DataType) => console.log('row clicked', row);
+
+	return (
+		<DataGrid
+			keyId='id'
+			rows={fakeData}
+			columns={columns}
+			tree={{
+				isInitialExpanded: true,
+				expandedLevel: 3,
+			}}
+			onRowClick={handleRowClick}
+			onRetry={() => {}}
+		/>
+	);
+};
+
+/**
+ *  Пропс `initialVisibleChildrenCount` позволяет настраивать количество отображаемых элементов при раскрытии корневого элемента.
+ *  Элементы, сверх этого значения, будут скрыты под кнопку "Показать все"
+ */
+export const TreeWithInitialVisibleChildrenCount = () => {
+	const ACTIONS: DataGridActions<DataType> = {
+		main: [
+			{
+				icon: <Trash />,
+				name: 'Удалить',
+				onClick: () => console.log('delete'),
+			},
+		],
+	};
+
+	const columns = makeColumns(FAKE_COLUMNS, [
+		{
+			field: 'actions',
+			renderCell: (row) => {
+				return <DataGridActionCell actions={ACTIONS} row={row} />;
+			},
+		},
+	]);
+
+	const fakeData: DataGridRowWithOptions<DataType>[] = [
+		{
+			id: '123456789',
+			documentName: 'Пакет документов',
+			recipient: 'ПАО "Первый завод"',
+			createDate: makeRandomDate(),
+			children: [
+				{
+					id: '1234567890',
+					documentName: 'Договор №12345678',
+					recipient: 'ПАО "Первый завод"',
+					createDate: makeRandomDate(),
+				},
+			],
+		},
+		...makeDataListWithTree(9),
+	];
+
+	const handleRowClick = (row: DataType) => console.log('row clicked', row);
+
+	return (
+		<DataGrid
+			keyId='id'
+			rows={fakeData}
+			columns={columns}
+			tree={{
+				isInitialExpanded: true,
+				initialVisibleChildrenCount: 5,
+			}}
+			onRowClick={handleRowClick}
+			onRetry={() => {}}
+		/>
+	);
+};
+
+/**
+ * Таблица с древовидной структурой так же работает в варианте с множественным выбором (чекбоксы)
+ */
+export const TreeWithCheckbox = () => {
+	const ACTIONS: DataGridActions<DataType> = {
+		main: [
+			{
+				icon: <Trash />,
+				name: 'Удалить',
+				onClick: () => console.log('delete'),
+			},
+		],
+	};
+
+	const columns = makeColumns(FAKE_COLUMNS, [
+		{
+			field: 'actions',
+			renderCell: (row) => {
+				return <DataGridActionCell actions={ACTIONS} row={row} />;
+			},
+		},
+	]);
+
+	const fakeData: DataGridRowWithOptions<DataType>[] = [
+		{
+			id: '123456789',
+			documentName: 'Пакет документов',
+			recipient: 'ПАО "Первый завод"',
+			createDate: makeRandomDate(),
+			children: [
+				{
+					id: '1234567890',
+					documentName: 'Договор №12345678',
+					recipient: 'ПАО "Первый завод"',
+					createDate: makeRandomDate(),
+				},
+			],
+		},
+		...makeDataListWithTree(9),
+	];
+
+	const [slicedData, setSlicedData] = useState<DataType[]>([]);
+	const [selected, setSelected] = useState<DataType[]>([]);
+	const [isLoading, setLoading] = useState(true);
+
+	useEffect(() => {
+		setTimeout(() => {
+			setSlicedData(fakeData.slice(0, 10));
+			setLoading(false);
+		}, 1500);
+	}, []);
+
+	const handleRowClick = (row: DataType) => console.log('row clicked', row);
+	const handleSelect = (rows: DataType[]) => setSelected(rows);
+
+	return (
+		<DataGrid<DataType, SortField>
+			keyId='id'
+			rows={slicedData}
+			columns={columns}
+			isLoading={isLoading}
+			selectedRows={selected}
+			onSelectRow={handleSelect}
+			onRowClick={handleRowClick}
+			onRetry={() => {}}
+		/>
+	);
+};
+
+/**
+ * Указав значение `isNotSelectable` в `options` можно сделать строку не доступной для выбора
+ */
+export const TreeWithOptionIsNotSelectable = () => {
+	const columns = makeColumns(FAKE_COLUMNS);
+
+	const fakeData: DataGridRowWithOptions<DataType>[] = [
+		{
+			id: '123456789',
+			documentName: 'Пакет документов',
+			recipient: 'ПАО "Первый завод"',
+			createDate: makeRandomDate(),
+			options: {
+				isNotSelectable: true,
+			},
+			children: [
+				{
+					id: '1234567890',
+					documentName: 'Договор №12345678',
+					recipient: 'ПАО "Первый завод"',
+					createDate: makeRandomDate(),
+					options: {
+						isNotSelectable: true,
+					},
+				},
+			],
+		},
+		{
+			id: '1234544545',
+			documentName: 'Пакет документов',
+			recipient: 'ООО "Купи Продай"',
+			createDate: makeRandomDate(),
+			options: {
+				isNotSelectable: true,
+			},
+			children: [
+				{
+					id: '1234567890',
+					documentName: 'Договор №12345678',
+					recipient: 'ПАО "Первый завод"',
+					createDate: makeRandomDate(),
+				},
+			],
+		},
+		...makeDataList(FAKE_DATA_TEMPLATE),
+	];
+
+	const [slicedData, setSlicedData] = useState<DataType[]>([]);
+	const [selected, setSelected] = useState<DataType[]>([]);
+	const [isLoading, setLoading] = useState(true);
+
+	useEffect(() => {
+		setTimeout(() => {
+			setSlicedData(fakeData.slice(0, 10));
+			setLoading(false);
+		}, 1500);
+	}, []);
+
+	const handleRowClick = (row: DataType) => console.log('row clicked', row);
+
+	const handleSelect = (rows: DataType[]) => setSelected(rows);
+
+	return (
+		<DataGrid<DataType, SortField>
+			keyId='id'
+			rows={slicedData}
+			columns={columns}
+			isLoading={isLoading}
+			selectedRows={selected}
+			onSelectRow={handleSelect}
+			onRowClick={handleRowClick}
+			onRetry={() => {}}
+		/>
+	);
+};
+
+/**
+ * `options` и `childrenColumns` на уровне строки, позволяет настраивать отображение дочерних элементов,
+ *  например указать кастомный список действий для вложенных элементов
+ */
+export const TreeWithOverrideColumns = () => {
+	const ACTIONS: DataGridActions<DataType> = {
+		main: [
+			{
+				icon: <Trash />,
+				name: 'Удалить',
+				onClick: () => console.log('delete'),
+			},
+		],
+	};
+
+	const columns = makeColumns(FAKE_COLUMNS, [
+		{
+			field: 'actions',
+			renderCell: (row) => {
+				return <DataGridActionCell actions={ACTIONS} row={row} />;
+			},
+		},
+	]);
+
+	const fakeData: DataGridRowWithOptions<DataType>[] = [
+		{
+			id: '123456789',
+			documentName: 'Пакет документов',
+			recipient: 'ПАО "Первый завод"',
+			createDate: makeRandomDate(),
+			children: [
+				{
+					id: '1234567890',
+					documentName: 'Договор №12345678',
+					recipient: 'ПАО "Первый завод"',
+					createDate: makeRandomDate(),
+				},
+			],
+			options: {
+				childrenColumns: [
+					{
+						field: 'actions',
+						renderCell: (row) => {
+							return (
+								<DataGridActionCell
+									actions={{
+										main: [
+											{
+												icon: <Eye />,
+												name: 'Просмотреть',
+												onClick: () => console.log('main'),
+											},
+										],
+									}}
+									row={row}
+								/>
+							);
+						},
+					},
+				],
+			},
+		},
+		...makeDataListWithTree(9, {
+			childrenColumns: [
+				{
+					field: 'actions',
+					renderCell: (row) => {
+						return (
+							<DataGridActionCell
+								actions={{
+									main: [
+										{
+											icon: <Eye />,
+											name: 'Просмотреть',
+											onClick: () => console.log('main'),
+										},
+									],
+								}}
+								row={row}
+							/>
+						);
+					},
+				},
+			],
+		}),
+	];
+
+	const [slicedData, setSlicedData] = useState<DataType[]>([]);
+	const [selected, setSelected] = useState<DataType[]>([]);
+	const [isLoading, setLoading] = useState(true);
+
+	useEffect(() => {
+		setTimeout(() => {
+			setSlicedData(fakeData.slice(0, 10));
+			setLoading(false);
+		}, 1500);
+	}, []);
+
+	const handleRowClick = (row: DataType) => console.log('row clicked', row);
+
+	const handleSelect = (rows: DataType[]) => setSelected(rows);
+
+	return (
+		<DataGrid<DataType, SortField>
+			keyId='id'
+			rows={slicedData}
+			columns={columns}
+			isLoading={isLoading}
+			selectedRows={selected}
+			onSelectRow={handleSelect}
+			onRowClick={handleRowClick}
+			onRetry={() => {}}
+		/>
+	);
+};
+
+/**
+ * Возможно отображение дочерних элементов в виде вложенных строк. Для этого необходимо указать `variant="subrows"`
+ * В таком варианте отображения вложенные элементы отображаются сразу и только часть из них прячется под кнопку "Показать все"
+ */
+export const Subrows = () => {
+	const columns: DataGridColumns<DataType>[] = [
+		{
+			field: 'recipient',
+			label: 'Получатель',
+			sortable: true,
+		},
+		{
+			field: 'documentName',
+			label: 'Наименование документа',
+			sortable: true,
+		},
+		{
+			field: 'createDate',
+			label: 'Дата создания',
+			sortable: true,
+			format: ({ createDate }) => new Date(createDate).toLocaleDateString(),
+		},
+		{
+			field: 'actions',
+			label: 'Действия',
+			sortable: false,
+			align: 'center',
+			width: '120px',
+			renderCell: (row) => {
+				return <DataGridActionCell actions={FAKE_ACTIONS} row={row} />;
+			},
+		},
+	];
+
+	const fakeData: DataGridRowWithOptions<DataType>[] = [
+		{
+			id: '123456789',
+			documentName: 'УКД № 47',
+			recipient: 'ПАО "Первый завод"',
+			createDate: makeRandomDate(),
+			options: {
+				isNotSelectable: true,
+				childrenColumns: [
+					{
+						field: 'recipient',
+						renderCell: () => null,
+					},
+					{
+						field: 'actions',
+						renderCell: () => null,
+					},
+				],
+			},
+			children: [
+				{
+					id: '1234567890',
+					documentName: 'Акт № УТ000006319',
+					recipient: 'ПАО "Первый завод"',
+					createDate: makeRandomDate(),
+					options: {
+						isNotSelectable: true,
+					},
+				},
+				{
+					id: '1234567891',
+					documentName: 'Торг-12 № 1446',
+					recipient: 'ПАО "Первый завод"',
+					createDate: makeRandomDate(),
+					options: {
+						isNotSelectable: true,
+					},
+				},
+				{
+					id: '1234567892',
+					documentName: 'Счет-фактура №1237',
+					recipient: 'ПАО "Первый завод"',
+					createDate: makeRandomDate(),
+					options: {
+						isNotSelectable: true,
+					},
+				},
+			],
+		},
+		{
+			id: '1234544545',
+			documentName: 'УКД № 46',
+			recipient: 'ООО "Купи Продай"',
+			createDate: makeRandomDate(),
+			options: {
+				childrenColumns: [
+					{
+						field: 'recipient',
+						renderCell: () => null,
+					},
+					{
+						field: 'actions',
+						renderCell: () => null,
+					},
+				],
+			},
+			children: [
+				{
+					id: '1234567890',
+					documentName: 'Счет-фактура №1231',
+					recipient: 'ПАО "Первый завод"',
+					createDate: makeRandomDate(),
+					options: {
+						isNotSelectable: true,
+					},
+				},
+			],
+		},
+		...makeDataList(FAKE_DATA_TEMPLATE),
+	];
+
+	const [slicedData, setSlicedData] = useState<DataType[]>([]);
+	const [selected, setSelected] = useState<DataType[]>([]);
+	const [isLoading, setLoading] = useState(true);
+	const [page, setPage] = useState<number>(1);
+
+	useEffect(() => {
+		setTimeout(() => {
+			setSlicedData(fakeData.slice((page - 1) * 10, page * 10));
+			setLoading(false);
+		}, 1500);
+	}, []);
+
+	const handleRowClick = (row: DataType) => console.log('row clicked', row);
+
+	const handleSelect = (rows: DataType[]) => setSelected(rows);
+
+	const handleChangePage = (
+		_event: ChangeEvent<unknown>,
+		newPage: number,
+	): void => {
+		setLoading(true);
+		setPage(newPage);
+
+		setTimeout(() => {
+			setLoading(false);
+			setSlicedData(fakeData.slice((newPage - 1) * 10, newPage * 10));
+		}, 1500);
+	};
+
+	return (
+		<DataGrid<DataType, SortField>
+			keyId='id'
+			rows={slicedData}
+			columns={columns}
+			variant='subrows'
+			subrows={{
+				moreButtonColumnPosition: 2,
+			}}
+			isLoading={isLoading}
+			selectedRows={selected}
+			footer={
+				<DataGridPagination
+					rowsPerPage={10}
+					totalCount={fakeData.length}
+					onChange={handleChangePage}
+					page={page}
+				/>
+			}
+			onSelectRow={handleSelect}
+			onRowClick={handleRowClick}
+			onRetry={() => {}}
+		/>
+	);
+};
+
+/**
+ * Можно отключить отображение шеврона с помощью параметра `isVisibleCollapseButton=false`
+ */
+export const IsVisibleCollapseButton = () => {
+	const columns: DataGridColumns<DataType>[] = [
+		{
+			field: 'recipient',
+			label: 'Получатель',
+			sortable: true,
+		},
+		{
+			field: 'documentName',
+			label: 'Наименование документа',
+			sortable: true,
+		},
+		{
+			field: 'createDate',
+			label: 'Дата создания',
+			sortable: true,
+			format: ({ createDate }) => new Date(createDate).toLocaleDateString(),
+		},
+		{
+			field: 'actions',
+			label: 'Действия',
+			sortable: false,
+			align: 'center',
+			width: '120px',
+			renderCell: (row) => {
+				return <DataGridActionCell actions={FAKE_ACTIONS} row={row} />;
+			},
+		},
+	];
+
+	const fakeData: DataGridRowWithOptions<DataType>[] = [
+		{
+			id: '123456789',
+			documentName: 'УКД № 47',
+			recipient: 'ПАО "Первый завод"',
+			createDate: makeRandomDate(),
+			options: {
+				childrenColumns: [
+					{
+						field: 'recipient',
+						renderCell: () => null,
+					},
+					{
+						field: 'actions',
+						renderCell: () => null,
+					},
+				],
+			},
+			children: [
+				{
+					id: '1234567890',
+					documentName: 'Акт № УТ000006319',
+					recipient: 'ПАО "Первый завод"',
+					createDate: makeRandomDate(),
+					options: {
+						isNotSelectable: true,
+					},
+				},
+				{
+					id: '1234567891',
+					documentName: 'Торг-12 № 1446',
+					recipient: 'ПАО "Первый завод"',
+					createDate: makeRandomDate(),
+					options: {
+						isNotSelectable: true,
+					},
+				},
+				{
+					id: '1234567892',
+					documentName: 'Счет-фактура №1237',
+					recipient: 'ПАО "Первый завод"',
+					createDate: makeRandomDate(),
+					options: {
+						isNotSelectable: true,
+					},
+				},
+			],
+		},
+		{
+			id: '1234544545',
+			documentName: 'УКД № 46',
+			recipient: 'ООО "Купи Продай"',
+			createDate: makeRandomDate(),
+			options: {
+				childrenColumns: [
+					{
+						field: 'recipient',
+						renderCell: () => null,
+					},
+					{
+						field: 'actions',
+						renderCell: () => null,
+					},
+				],
+			},
+			children: [
+				{
+					id: '1234567890',
+					documentName: 'Счет-фактура №1231',
+					recipient: 'ПАО "Первый завод"',
+					createDate: makeRandomDate(),
+					options: {
+						isNotSelectable: true,
+					},
+				},
+			],
+		},
+		...makeDataList(FAKE_DATA_TEMPLATE),
+	];
+
+	const [slicedData, setSlicedData] = useState<DataType[]>([]);
+	const [selected, setSelected] = useState<DataType[]>([]);
+	const [isLoading, setLoading] = useState(true);
+	const [page, setPage] = useState<number>(1);
+
+	useEffect(() => {
+		setTimeout(() => {
+			setSlicedData(fakeData.slice((page - 1) * 10, page * 10));
+			setLoading(false);
+		}, 1500);
+	}, []);
+
+	const handleRowClick = (row: DataType) => console.log('row clicked', row);
+
+	const handleSelect = (rows: DataType[]) => setSelected(rows);
+
+	const handleChangePage = (
+		_event: ChangeEvent<unknown>,
+		newPage: number,
+	): void => {
+		setLoading(true);
+		setPage(newPage);
+
+		setTimeout(() => {
+			setLoading(false);
+			setSlicedData(fakeData.slice((newPage - 1) * 10, newPage * 10));
+		}, 1500);
+	};
+
+	return (
+		<DataGrid<DataType, SortField>
+			keyId='id'
+			rows={slicedData}
+			columns={columns}
+			variant='subrows'
+			subrows={{
+				moreButtonColumnPosition: 2,
+				isVisibleCollapseButton: false,
+			}}
+			isLoading={isLoading}
+			selectedRows={selected}
+			footer={
+				<DataGridPagination
+					rowsPerPage={10}
+					totalCount={fakeData.length}
+					onChange={handleChangePage}
+					page={page}
+				/>
+			}
+			onSelectRow={handleSelect}
+			onRowClick={handleRowClick}
+			onRetry={() => {}}
+		/>
+	);
+};
+
+/**
+ * Состояние загрузки регулируется полем `loading` экшенов переданных в `<ActionCell/>`
+ */
+export const WithLoaderInButton = () => {
+	const ACTIONS_WITH_LOADER: DataGridActions<DataType> = {
+		main: [
+			{
+				icon: <Eye />,
+				name: 'Просмотреть',
+				onClick: () => console.log('main'),
+			},
+			{
+				icon: <Send />,
+				loading: true,
+				name: 'Отправить',
+			},
+		],
+		secondary: [
+			{ name: 'Редактировать', onClick: () => console.log('secondary 1') },
+			{ name: 'Удалить', onClick: () => console.log('secondary 2') },
+		],
+	};
+
+	const columns = makeColumns(FAKE_COLUMNS, [
+		{
+			field: 'actions',
+			renderCell: (row) => {
+				return <DataGridActionCell actions={ACTIONS_WITH_LOADER} row={row} />;
+			},
+		},
+	]);
+
+	const fakeData: DataGridRowWithOptions<DataType>[] = [
+		{
+			id: '123456789',
+			documentName: 'Договор №12345678',
+			recipient: 'ПАО "Первый завод"',
+			createDate: makeRandomDate(),
+		},
+		...makeDataList(FAKE_DATA_TEMPLATE),
+	];
+
+	const [slicedData, setSlicedData] = useState<DataType[]>([]);
+	const [isLoading, setLoading] = useState(true);
+
+	useEffect(() => {
+		setTimeout(() => {
+			setSlicedData(fakeData.slice(0, 5));
+			setLoading(false);
+		}, 1500);
+	}, []);
+
+	const handleRowClick = (row: DataType) => console.log('row clicked', row);
+
+	return (
+		<DataGrid<DataType, SortField>
+			keyId='id'
+			rows={slicedData}
+			columns={columns}
+			isLoading={isLoading}
+			onRowClick={handleRowClick}
+			onRetry={() => {}}
+		/>
+	);
+};
+
+/**
+ * В случае, когда нет данных для отображения их в таблице, необходимо показать изображение и текст “Нет данных” и убрать сортировку для столбцов, если она присутствует.
+ * Изображение можно передать через ConfigProvider.
+ */
+export const NoData = () => {
+	const noDataStubSrc = '/no-data-stub.svg';
+	const columns = FAKE_COLUMNS;
+
+	const [isLoading, setLoading] = useState(true);
+	const [slicedData, setSlicedData] = useState<DataType[]>([]);
+
+	useEffect(() => {
+		setTimeout(() => {
+			setSlicedData([]);
+			setLoading(false);
+		}, 1500);
+	}, []);
+
+	const handleRowClick = (row: DataType) => console.log('row clicked', row);
+
+	return (
+		<ConfigProvider
+			imagesMap={{
+				defaultErrorImgSrc: '',
+				noDataImgSrc: noDataStubSrc,
+				outdatedReleaseErrorImgSrc: '',
+			}}
+		>
+			<DataGrid<DataType, SortField>
+				keyId='id'
+				activeRowId={'3'}
+				rows={slicedData}
+				columns={columns}
+				isLoading={isLoading}
+				onRowClick={handleRowClick}
+				onRetry={() => {}}
+				noDataOptions={{
+					action: {
+						text: 'Сбросить фильтры',
+						onClick: () => {},
+					},
+				}}
+			/>
+		</ConfigProvider>
+	);
+};
+
+export const Loading = () => {
+	const noDataStubSrc = '/no-data-stub.svg';
+
+	const columns = FAKE_COLUMNS;
+
+	const handleRetry = () => console.log('retry request');
+	const handleRowClick = (row: DataType) => console.log('row clicked', row);
+
+	return (
+		<ConfigProvider
+			imagesMap={{
+				defaultErrorImgSrc: errorIllustration,
+				noDataImgSrc: noDataStubSrc,
+				outdatedReleaseErrorImgSrc: '',
+			}}
+		>
+			<DataGrid<DataType, SortField>
+				keyId='id'
+				isLoading
+				rows={[]}
+				columns={columns}
+				onRowClick={handleRowClick}
+				onRetry={handleRetry}
+			/>
+		</ConfigProvider>
+	);
+};
+
+export const ErrorExample = () => {
+	const noDataStubSrc = '/no-data-stub.svg';
+	const columns = FAKE_COLUMNS;
+
+	const handleRetry = () => console.log('retry request');
+	const handleRowClick = (row: DataType) => console.log('row clicked', row);
+
+	return (
+		<ConfigProvider
+			imagesMap={{
+				defaultErrorImgSrc: errorIllustration,
+				noDataImgSrc: noDataStubSrc,
+				outdatedReleaseErrorImgSrc: '',
+			}}
+		>
+			<DataGrid<DataType, SortField>
+				keyId='id'
+				isError
+				errorMsg='Ошибка 500'
+				rows={[]}
+				columns={columns}
+				onRowClick={handleRowClick}
+				onRetry={handleRetry}
+			/>
+		</ConfigProvider>
+	);
+};