profinansy-ui-lib 3.6.49 → 3.6.51

package/dist/components/uikit/Table/Table.stories.js

@@ -0,0 +1,151 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.THeader = exports.Table = exports.TCellText = void 0;
+const react_1 = __importStar(require("react"));
+const StoryTitle_1 = require("../storybook/StoryTitle/StoryTitle");
+const Table_1 = require("./Table");
+const StoryExample_1 = require("../storybook/StoryExample/StoryExample");
+const MockData_1 = require("./components/MockData");
+const Card_1 = require("../Card");
+const StoryDescription_1 = require("../storybook/StoryDescription/StoryDescription");
+const Typography_1 = require("../Typography");
+const TextButton_1 = require("../TextButton");
+const Input_1 = require("../Input");
+const CompanyInfo_1 = require("../../blocks/CompanyInfo");
+const TCellText_1 = require("./components/TCellText/TCellText");
+const Button_1 = require("../Button");
+exports.default = {
+    title: 'Components/Table',
+    component: Table_1.Table,
+    tags: ['autodocs']
+};
+const TCellText = () => {
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(StoryTitle_1.StoryTitle, { isBig: true }, "TCellText"),
+        react_1.default.createElement(StoryDescription_1.StoryDescription, { text: "\u0418\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u0442\u0441\u044F \u0434\u043B\u044F \u0442\u0435\u043A\u0441\u0442\u043E\u0432\u044B\u0445 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0439 \u0432\u043D\u0443\u0442\u0440\u0438 \u0442\u0430\u0431\u043B\u0438\u0446\u044B." }),
+        react_1.default.createElement(StoryExample_1.StoryExample, null,
+            react_1.default.createElement(TCellText_1.TCellText, null, "\u0421\u0431\u0435\u0440\u0431\u0430\u043D\u043A \u2014 \u043A\u0440\u0443\u043F\u043D\u0435\u0439\u0448\u0438\u0439 \u0431\u0430\u043D\u043A \u0420\u043E\u0441\u0441\u0438\u0438, \u043F\u0440\u0435\u0434\u043E\u0441\u0442\u0430\u0432\u043B\u044F\u044E\u0449\u0438\u0439 \u0448\u0438\u0440\u043E\u043A\u0438\u0439 \u0441\u043F\u0435\u043A\u0442\u0440 \u0444\u0438\u043D\u0430\u043D\u0441\u043E\u0432\u044B\u0445 \u0443\u0441\u043B\u0443\u0433, \u0432\u043A\u043B\u044E\u0447\u0430\u044F \u0431\u0430\u043D\u043A\u043E\u0432\u0441\u043A\u0438\u0435, \u0441\u0442\u0440\u0430\u0445\u043E\u0432\u044B\u0435 \u0438 \u0438\u043D\u0432\u0435\u0441\u0442\u0438\u0446\u0438\u043E\u043D\u043D\u044B\u0435 \u043F\u0440\u043E\u0434\u0443\u043A\u0442\u044B.")),
+        react_1.default.createElement(StoryTitle_1.StoryTitle, null, "\u0421\u043A\u0440\u044B\u0442\u0438\u0435 \u0442\u0435\u043A\u0441\u0442\u0430"),
+        react_1.default.createElement(StoryDescription_1.StoryDescription, { text: "\u0415\u0441\u043B\u0438 \u0442\u0435\u043A\u0441\u0442 \u043D\u0435 \u0432\u043B\u0435\u0437\u0430\u0435\u0442 \u0432 \u044F\u0447\u0435\u0439\u043A\u0443 \u0438 \u0434\u043E\u043B\u0436\u0435\u043D \u0441\u043A\u0440\u044B\u0442\u044C\u0441\u044F \u0437\u0430 \u043C\u043D\u043E\u0433\u043E\u0442\u043E\u0447\u0438\u0435\u043C, \u0442\u043E \u043C\u043E\u0436\u043D\u043E \u0434\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u043F\u0440\u043E\u043F\u0441 <b>hiddenText</b>." }),
+        react_1.default.createElement(StoryExample_1.StoryExample, null,
+            react_1.default.createElement("div", { style: { maxWidth: '200px' } },
+                react_1.default.createElement(TCellText_1.TCellText, { hiddenText: { mode: 'ellipsis' } }, "\u0421\u0431\u0435\u0440\u0431\u0430\u043D\u043A \u2014 \u043A\u0440\u0443\u043F\u043D\u0435\u0439\u0448\u0438\u0439 \u0431\u0430\u043D\u043A \u0420\u043E\u0441\u0441\u0438\u0438, \u043F\u0440\u0435\u0434\u043E\u0441\u0442\u0430\u0432\u043B\u044F\u044E\u0449\u0438\u0439 \u0448\u0438\u0440\u043E\u043A\u0438\u0439 \u0441\u043F\u0435\u043A\u0442\u0440 \u0444\u0438\u043D\u0430\u043D\u0441\u043E\u0432\u044B\u0445 \u0443\u0441\u043B\u0443\u0433, \u0432\u043A\u043B\u044E\u0447\u0430\u044F \u0431\u0430\u043D\u043A\u043E\u0432\u0441\u043A\u0438\u0435, \u0441\u0442\u0440\u0430\u0445\u043E\u0432\u044B\u0435 \u0438 \u0438\u043D\u0432\u0435\u0441\u0442\u0438\u0446\u0438\u043E\u043D\u043D\u044B\u0435 \u043F\u0440\u043E\u0434\u0443\u043A\u0442\u044B.")))));
+};
+exports.TCellText = TCellText;
+const Table = () => {
+    const [openRows, setOpenRows] = (0, react_1.useState)([]);
+    const handleOpenRows = (id) => {
+        if (openRows.includes(id)) {
+            setOpenRows(openRows.filter((val) => val !== id));
+        }
+        else {
+            setOpenRows((prev) => [...prev, id]);
+        }
+    };
+    const data = (0, react_1.useMemo)(() => {
+        const arr = [
+            {
+                CustomRow: (react_1.default.createElement("div", { style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'space-between'
+                    } },
+                    react_1.default.createElement(Typography_1.Typography, { variant: "header5-Bold", tag: "span" }, "\u0410\u043A\u0446\u0438\u0438"),
+                    react_1.default.createElement(Button_1.Button, { onClick: () => alert('test'), text: "\u041F\u0440\u0438\u043C\u0435\u0440 \u043A\u043E\u043D\u0442\u0435\u043D\u0442\u0430 \u0441\u043F\u0440\u0430\u0432\u0430" })))
+            }
+        ];
+        const newData = MockData_1.MOCK_DATA_1.map((item) => {
+            if (openRows.includes(item.id)) {
+                return Object.assign(Object.assign({}, item), { expandContent: react_1.default.createElement(Expand, { description: item.description }) });
+            }
+            return item;
+        });
+        return [...arr, ...newData];
+    }, [openRows, MockData_1.MOCK_DATA_1]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(StoryTitle_1.StoryTitle, { isBig: true }, "Table"),
+        react_1.default.createElement(StoryDescription_1.StoryDescription, { text: "\u041A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u0442\u0441\u044F \u0434\u043B\u044F \u043F\u043E\u0441\u0442\u0440\u043E\u0435\u043D\u0438\u044F \u0442\u0430\u0431\u043B\u0438\u0446." }),
+        react_1.default.createElement(StoryDescription_1.StoryDescription, { text: "\u0427\u0442\u043E-\u0431\u044B \u0437\u0430\u043A\u0440\u0435\u043F\u0438\u0442\u044C \u043F\u0435\u0440\u0432\u0443\u044E \u043A\u043E\u043B\u043E\u043D\u043A\u0443 \u043F\u0440\u0438 \u0433\u043E\u0440\u0438\u0437\u043E\u043D\u0442\u0430\u043B\u044C\u043D\u043E\u043C \u0441\u043A\u0440\u043E\u043B\u0435 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435 \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u043E <b>stickyFirstColumn</b>" }),
+        react_1.default.createElement(StoryDescription_1.StoryDescription, { text: "\u0427\u0442\u043E-\u0431\u044B \u0437\u0430\u043A\u0440\u0435\u043F\u0438\u0442\u044C \u0445\u044D\u0434\u0435\u0440 \u043F\u0440\u0438 \u0432\u0435\u0440\u0442\u0438\u043A\u0430\u043B\u044C\u043D\u043E\u043C \u0441\u043A\u0440\u043E\u043B\u0435, \u0435\u0441\u043B\u0438 \u0442\u0430\u0431\u043B\u0438\u0446\u0430 \u0438\u043C\u0435\u0435\u0442 \u0444\u0438\u043A\u0441\u0438\u0440\u043E\u0432\u0430\u043D\u043D\u0443\u044E \u0432\u044B\u0441\u043E\u0442\u0443, \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435 \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u043E <b>stickyHeader</b>" }),
+        react_1.default.createElement(StoryDescription_1.StoryDescription, { text: "\u0415\u0441\u043B\u0438 \u0432 \u0442\u0430\u0431\u043B\u0438\u0446\u0435 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u044E\u0442\u0441\u044F \u043F\u043E\u0434\u0441\u043A\u0430\u0437\u043A\u0438, \u0442\u043E \u043D\u0430\u0434\u043E \u0435\u0439 \u043F\u0440\u043E\u043A\u0438\u0434\u044B\u0432\u0430\u0442\u044C \u043E\u0431\u044A\u0435\u043A\u0442 \u0441 \u043F\u043E\u0434\u0441\u043A\u0430\u0437\u043A\u0430\u043C\u0438 \u0432 \u0444\u043E\u0440\u043C\u0430\u0442\u0435 <b>key:value</b>.\n      \u0421\u0430\u043C\u0438 \u043A\u043B\u044E\u0447\u0438 \u043F\u043E\u0434\u0441\u043A\u0430\u0437\u043E\u043A \u043F\u0440\u043E\u043F\u0438\u0441\u044B\u0432\u0430\u044E\u0442\u0441\u044F \u0432 \u043E\u0431\u044A\u0435\u043A\u0442\u0435 \u043A\u043E\u043B\u043E\u043D\u043A\u0438." }),
+        react_1.default.createElement(StoryDescription_1.StoryDescription, { text: "\u0421\u0432\u043E\u0439\u0441\u0442\u0432\u043E <b>columns</b> \u043F\u0440\u0438\u043D\u0438\u043C\u0430\u0435\u0442 \u043C\u0430\u0441\u0441\u0438\u0432 \u043E\u0431\u044A\u0435\u043A\u0442\u043E\u0432 \u0441\u043E \u0441\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u043C\u0438 \u043A\u043B\u044E\u0447\u0430\u043C\u0438:\n      <ul style='padding-left: 20px;'>\n        <li><b>title</b> - \u0437\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A \u043A\u043E\u043B\u043E\u043D\u043A\u0438</li>\n        <li><b>key</b> - \u043A\u043B\u044E\u0447 \u043A\u043E\u043B\u043E\u043D\u043A\u0438</li>\n        <li><b>hint</b> - \u043A\u043E\u0434 \u043F\u043E\u0434\u0441\u043A\u0430\u0437\u043A\u0438</li>\n        <li><b>sort</b> - \u043D\u0443\u0436\u043D\u0430 \u043B\u0438 \u0441\u043E\u0440\u0442\u0438\u0440\u043E\u0432\u043A\u0430 \u043F\u043E \u0434\u0430\u043D\u043D\u043E\u0439 \u043A\u043E\u043B\u043E\u043D\u043A\u0435</li>\n        <li><b>maxWidth</b> - \u043C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u043E \u0432\u043E\u0437\u043C\u043E\u0436\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430 \u043A\u043E\u043B\u043E\u043D\u043A\u0438</li>\n        <li><b>alignment</b> - \u0432\u044B\u0440\u0430\u0432\u043D\u0438\u0432\u0430\u043D\u0438\u0435 \u043A\u043E\u043D\u0442\u0435\u043D\u0442\u0430 \u0432\u043D\u0443\u0442\u0440\u0438 \u043A\u043E\u043B\u043E\u043D\u043A\u0438. \u041C\u043E\u0436\u0435\u0442 \u043F\u0440\u0438\u043D\u0438\u043C\u0430\u0442\u044C \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u044F: <b>'left' | 'right' | 'center'</b></li>\n      </ul>" }),
+        react_1.default.createElement(StoryTitle_1.StoryTitle, null, "\u041F\u0440\u0430\u0432\u0438\u043B\u043E \u0432\u044B\u0440\u0430\u0432\u043D\u0438\u0432\u0430\u043D\u0438\u044F"),
+        react_1.default.createElement(StoryDescription_1.StoryDescription, { text: "\u0412\u0441\u0435 \u043A\u043E\u043B\u043E\u043D\u043A\u0438 \u0432\u044B\u0440\u0430\u0432\u043D\u0438\u0432\u0430\u044E\u0442\u0441\u044F \u043F\u043E \u0442\u0440\u0435\u043C \u043F\u0440\u0430\u0432\u0438\u043B\u0430\u043C:\n        <ul style='padding-left: 20px;'>\n        <li><b>left</b> - \u041A\u043E\u043B\u043E\u043D\u043A\u0438, \u043A\u043E\u0442\u043E\u0440\u044B\u0435 \u0441\u043E\u0434\u0435\u0440\u0436\u0430\u0442 \u043A\u0430\u043A\u043E\u0435-\u0442\u043E \u0442\u0435\u043A\u0441\u0442\u043E\u0432\u043E\u0435 \u043E\u043F\u0438\u0441\u0430\u043D\u0438\u0435.</li>\n        <li><b>right</b> - \u0427\u0438\u0441\u043B\u043E\u0432\u044B\u0435 \u043A\u043E\u043B\u043E\u043D\u043A\u0438.</li>\n        <li><b>center</b> - \u0418\u043D\u044B\u0435 \u0441\u043B\u0443\u0447\u0430\u0438, \u043A\u043E\u0442\u043E\u0440\u044B\u0435 \u0441\u043A\u0430\u0437\u0430\u043D\u044B \u0432 \u0442\u0437.</li>\n      </ul>" }),
+        react_1.default.createElement(StoryDescription_1.StoryDescription, { text: "\u041D\u0443\u0436\u043D\u043E \u0432\u0441\u0435\u0433\u0434\u0430 \u043F\u0440\u0438\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044C\u0441\u044F \u0434\u0430\u043D\u043D\u043E\u0433\u043E \u0441\u0442\u0438\u043B\u044F \u0432\u044B\u0440\u0430\u0432\u043D\u0438\u0432\u0430\u043D\u0438\u044F, \u0435\u0441\u043B\u0438 \u0438\u043D\u0430\u0447\u0435 \u043D\u0435 \u0441\u043A\u0430\u0437\u0430\u043D\u043E \u0432 \u0442\u0437." }),
+        react_1.default.createElement(StoryTitle_1.StoryTitle, null, "\u042F\u0447\u0435\u0439\u043A\u0430 \u0432\u043D\u0443\u0442\u0440\u0438 \u0442\u0430\u0431\u043B\u0438\u0446\u044B"),
+        react_1.default.createElement(StoryDescription_1.StoryDescription, { text: "\u0412\u0441\u0435 \u0442\u0435\u043A\u0441\u0442\u044B \u0432\u043D\u0443\u0442\u0440\u0438 \u044F\u0447\u0435\u0435\u043A \u0438\u043C\u0435\u044E\u0442, \u043A\u0430\u043A \u043F\u0440\u0430\u0432\u0438\u043B\u043E, \u043E\u0434\u0438\u043D \u0441\u0442\u0438\u043B\u044C.\n      \u0414\u043B\u044F \u044D\u0442\u043E\u0433\u043E \u0431\u044B\u043B \u0441\u043E\u0437\u0434\u0430\u043D \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u0442 <b>TCellText</b>. \u041D\u0443\u0436\u043D\u043E \u0434\u043B\u044F \u043F\u043E\u0441\u0442\u0440\u043E\u0435\u043D\u0438\u044F \u0442\u0435\u043A\u0441\u0442\u043E\u0432 \u0432 \u044F\u0447\u0435\u0439\u043A\u0430\u0445 \u0442\u0430\u0431\u043B\u0438\u0446\u044B \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C \u0435\u0433\u043E." }),
+        react_1.default.createElement(StoryTitle_1.StoryTitle, null, "\u041F\u0435\u0440\u0435\u043D\u043E\u0441 \u0441\u043B\u043E\u0432 \u0432 \u0437\u0430\u0433\u043E\u043B\u043E\u0432\u043A\u0435"),
+        react_1.default.createElement(StoryDescription_1.StoryDescription, { text: "\u0415\u0441\u043B\u0438 \u0432\u0430\u043C \u043D\u0443\u0436\u043D\u043E, \u0447\u0442\u043E\u0431\u044B \u0437\u0430\u0433\u043E\u043B\u043E\u0432\u043A \u0431\u044B\u043B \u0432 \u0434\u0432\u0435 \u0438 \u0431\u043E\u043B\u0435\u0435 \u0441\u0442\u0440\u043E\u043A\u0438, \u0442\u043E \u0432 <b>title</b> \u0432 \u043C\u0435\u0441\u0442\u043E \u043F\u0435\u0440\u0435\u043D\u043E\u0441\u0430 \u043F\u0440\u043E\u043F\u0438\u0441\u044B\u0432\u0430\u0439\u0442\u0435: <b>\\n</b>" }),
+        react_1.default.createElement(StoryTitle_1.StoryTitle, null, "\u041A\u0440\u0435\u043F\u043B\u0435\u043D\u0438\u0435 \u0445\u044D\u0434\u0435\u0440\u0430 \u0442\u0430\u0431\u043B\u0438\u0446\u044B \u043A \u0432\u0435\u0440\u0445\u0443 \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u044B \u043F\u0440\u0438 \u0441\u043A\u0440\u043E\u043B\u043B\u0435"),
+        react_1.default.createElement(StoryDescription_1.StoryDescription, { text: "\u0415\u0441\u043B\u0438 \u0432\u0430\u043C \u043D\u0443\u0436\u043D\u043E, \u0447\u0442\u043E\u0431\u044B \u0445\u044D\u0434\u0435\u0440 \u043A\u0440\u0435\u043F\u0438\u043B\u0441\u044F \u043A \u0432\u0435\u0440\u0445\u0443 \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u044B \u043F\u0440\u0438 \u0441\u043A\u0440\u043E\u043B\u043B\u0435, \u0442\u043E \u043F\u0435\u0440\u0435\u0434\u0430\u0439\u0442\u0435 \u043F\u0440\u043E\u043F\u0441: <b>stickyPageHeader</b>" }),
+        react_1.default.createElement(StoryTitle_1.StoryTitle, null, "\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u043A\u0430\u0441\u0442\u043E\u043C\u043D\u0443\u044E \u0441\u0442\u0440\u043E\u043A\u0443"),
+        react_1.default.createElement(StoryDescription_1.StoryDescription, { text: "\u0415\u0441\u043B\u0438 \u0432\u0430\u043C \u043D\u0443\u0436\u043D\u043E \u0434\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0441\u0432\u043E\u0439 \u0432\u0438\u0434 \u0441\u0442\u0440\u043E\u043A\u0438 \u0432 \u0442\u0430\u0431\u043B\u0438\u0446\u0443, \u0442\u043E \u043F\u0440\u043E\u0441\u0442\u043E \u0432 \u043E\u0431\u044A\u0435\u043A\u0442 \u0441 \u0434\u0430\u043D\u043D\u044B\u043C\u0438 \u0434\u043E\u0431\u0430\u0432\u044C\u0442\u0435 \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u043E <b>CustomRow</b>. \u0412 \u043A\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u044F\n      \u043F\u0435\u0440\u0435\u0434\u0430\u0439\u0442\u0435 \u0432\u0435\u0440\u0441\u0442\u043A\u0443 \u0441\u0442\u0440\u043E\u043A\u0438 \u0438\u043B\u0438 \u0440\u0435\u0430\u043A\u0442 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442." }),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement(StoryExample_1.StoryExample, null,
+            react_1.default.createElement(Card_1.Card, null,
+                react_1.default.createElement(Table_1.Table, { onDoubleClickRow: (item) => alert(item), onClickRow: (item) => console.log(item), stickyFirstColumn: true, stickyLastColumn: true, columns: MockData_1.COLUMNS, hints: MockData_1.Hints, data: data, rowHeight: 56, tCellRenderer: ({ rowData, columnKey }) => (react_1.default.createElement(TCell, { key: columnKey, data: rowData, columnKey: columnKey, handleOpenRows: handleOpenRows })) }))),
+        react_1.default.createElement(StoryTitle_1.StoryTitle, null, "\u041A\u0430\u0441\u0442\u043E\u043C\u043D\u044B\u0439 \u0445\u044D\u0434\u0435\u0440"),
+        react_1.default.createElement(StoryDescription_1.StoryDescription, { text: "\u0415\u0441\u043B\u0438 \u0432\u0430\u043C \u043D\u0443\u0436\u043D\u043E \u043F\u0440\u043E\u043A\u0438\u043D\u0443\u0442\u044C \u043A\u0430\u0441\u0442\u043E\u043C\u043D\u044B\u0439 \u0445\u044D\u0434\u0435\u0440, \u0442\u043E \u043F\u0435\u0440\u0435\u0434\u0430\u0439\u0442\u0435 \u043F\u0440\u043E\u043F\u0441: <b>columnRenderer</b>" }),
+        react_1.default.createElement(StoryExample_1.StoryExample, null,
+            react_1.default.createElement(Card_1.Card, null,
+                react_1.default.createElement(Table_1.Table, { onClickRow: (item) => console.log(item), stickyFirstColumn: true, stickyLastColumn: true, columns: MockData_1.COLUMNS, hints: MockData_1.Hints, data: data, rowHeight: 56, columnRenderer: ({ title }) => react_1.default.createElement(exports.THeader, { title: title }), tCellRenderer: ({ rowData, columnKey }) => (react_1.default.createElement(TCell, { key: columnKey, data: rowData, columnKey: columnKey, handleOpenRows: handleOpenRows })) })))));
+};
+exports.Table = Table;
+const THeader = (props) => {
+    const { title } = props;
+    return react_1.default.createElement(Typography_1.Typography, { variant: "caption-Medium" }, title);
+};
+exports.THeader = THeader;
+const TCell = ({ data, columnKey, handleOpenRows }) => {
+    const values = data;
+    if (columnKey === 'name') {
+        return (react_1.default.createElement(CompanyInfo_1.CompanyInfo, { link: values.link, firstLine: values.ticker, secondLine: values.name, logo: values.logo }));
+    }
+    if (columnKey === 'action') {
+        return (react_1.default.createElement(TextButton_1.TextButton, { text: "\u041E\u0442\u043A\u0440\u044B\u0442\u044C", onClick: () => handleOpenRows(data.id) }));
+    }
+    if (columnKey === 'note') {
+        return (react_1.default.createElement("div", { style: { width: '200px' } },
+            react_1.default.createElement(Input_1.Input, { value: "", name: "name" })));
+    }
+    if (columnKey === 'p/e') {
+        return (react_1.default.createElement(TCellText_1.TCellText, { valueNumber: data[columnKey] }, data[columnKey]));
+    }
+    return (react_1.default.createElement(TCellText_1.TCellText, { hiddenText: { mode: 'multiline', lines: 2 } }, data[columnKey]));
+};
+const Expand = ({ description }) => {
+    return (react_1.default.createElement("div", { style: {
+            padding: '12px',
+            maxWidth: '100%',
+            position: 'sticky',
+            top: '0px',
+            left: '0px'
+        } },
+        react_1.default.createElement(Typography_1.Typography, { variant: "caption-Medium", tag: "span", colorName: "primary" }, description)));
+};
+//# sourceMappingURL=Table.stories.js.map

package/dist/components/uikit/Table/Table.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.stories.js","sourceRoot":"","sources":["../../../../src/components/uikit/Table/Table.stories.tsx"],"names":[],"mappings":"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"}

package/dist/components/uikit/Table/Table.styled.js

@@ -0,0 +1,75 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScrollWrapper = exports.Plug = exports.FixedHeader = exports.Table = exports.Container = void 0;
+const styled_components_1 = __importStar(require("styled-components"));
+const Scroll_1 = require("../../../styles/Scroll");
+const common_1 = require("../../../constants/common");
+exports.Container = styled_components_1.default.div `
+  width: 100%;
+  height: ${(props) => (props.tableHeight ? `${props.tableHeight}px` : 'auto')};
+  overflow: auto;
+  position: relative;
+  ${(props) => props.isDraggable &&
+    (0, styled_components_1.css) `
+      cursor: grab;
+      user-select: none;
+    `}
+  ${Scroll_1.Scroll}
+`;
+exports.Table = styled_components_1.default.table `
+  font-family: 'Manrope', sans-serif;
+  border-collapse: collapse;
+  width: 100%;
+`;
+exports.FixedHeader = styled_components_1.default.div `
+  position: fixed;
+  top: ${(props) => common_1.HEIGHT_HEADER + (props.fixedHeaderOffset || 0)}px;
+  z-index: 10;
+  left: ${(props) => `${props.left}px`};
+  width: ${(props) => `${props.tableWidth || 1857}px`};
+  overflow: hidden;
+`;
+exports.Plug = styled_components_1.default.div `
+  position: sticky;
+  top: 0;
+  height: 22px;
+  left: 0;
+  width: 100%;
+  background: ${(props) => props.theme.background.content};
+  & + thead {
+    top: -10px;
+  }
+`;
+exports.ScrollWrapper = styled_components_1.default.div `
+  width: 100%;
+  display: flex;
+  gap: 4px;
+  //  Когда кастомный скролл, то отключается и горизонтальный тоже!!
+  & > div {
+    overflow: hidden !important;
+  }
+`;
+//# sourceMappingURL=Table.styled.js.map

package/dist/components/uikit/Table/Table.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.styled.js","sourceRoot":"","sources":["../../../../src/components/uikit/Table/Table.styled.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,uEAA+C;AAC/C,mDAA+C;AAC/C,sDAAyD;AAC5C,QAAA,SAAS,GAAG,2BAAM,CAAC,GAAG,CAGjC;;YAEU,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,WAAW,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;;;IAG1E,CAAC,KAAK,EAAE,EAAE,CACV,KAAK,CAAC,WAAW;IACjB,IAAA,uBAAG,EAAA;;;KAGF;IACD,eAAM;CACT,CAAA;AAEY,QAAA,KAAK,GAAG,2BAAM,CAAC,KAAK,CAAA;;;;CAIhC,CAAA;AAEY,QAAA,WAAW,GAAG,2BAAM,CAAC,GAAG,CAInC;;SAEO,CAAC,KAAK,EAAE,EAAE,CAAC,sBAAa,GAAG,CAAC,KAAK,CAAC,iBAAiB,IAAI,CAAC,CAAC;;UAExD,CAAC,KAAK,EAAE,EAAE,CAAC,GAAG,KAAK,CAAC,IAAI,IAAI;WAC3B,CAAC,KAAK,EAAE,EAAE,CAAC,GAAG,KAAK,CAAC,UAAU,IAAI,IAAI,IAAI;;CAEpD,CAAA;AAEY,QAAA,IAAI,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;;gBAMd,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO;;;;CAIxD,CAAA;AAEY,QAAA,aAAa,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;;;;CAQtC,CAAA"}

package/dist/components/uikit/Table/Table.typed.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=Table.typed.js.map

package/dist/components/uikit/Table/Table.typed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.typed.js","sourceRoot":"","sources":["../../../../src/components/uikit/Table/Table.typed.ts"],"names":[],"mappings":""}

package/dist/components/uikit/Table/components/MockData.js

@@ -0,0 +1,261 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.COLUMNS = exports.Hints = exports.MOCK_DATA_1 = void 0;
+exports.MOCK_DATA_1 = [
+    {
+        id: 1,
+        name: 'Сбербанк',
+        ticker: 'SBER',
+        link: 'https://profinansy.ru/market/instrument/SBER',
+        logo: 'https://files.profinansy.ru/api/data/ambqefduv/Sberbank_of_Russia.jpg',
+        price: '315 ₽',
+        note: '',
+        sector: 'Финансы',
+        amount: 1000,
+        'p/e': 7.5,
+        'p/s': 3.2,
+        'p/b': 1.1,
+        description: 'Сбербанк — крупнейший банк России, предоставляющий широкий спектр финансовых услуг, включая банковские, страховые и инвестиционные продукты.'
+    },
+    {
+        id: 2,
+        name: 'Газпром',
+        ticker: 'GAZP',
+        link: 'https://profinansy.ru/market/instrument/SBER',
+        logo: 'https://files.profinansy.ru/api/data/ambqefduv/Gazprom_logo.png',
+        price: '250 ₽',
+        note: '',
+        sector: 'Энергетика',
+        amount: 2000,
+        'p/e': 4.8,
+        'p/s': 1.5,
+        'p/b': 0.9,
+        description: 'Газпром — крупнейшая энергетическая компания в мире, занимающаяся разведкой, добычей, транспортировкой и продажей природного газа.'
+    },
+    {
+        id: 3,
+        name: 'Лукойл',
+        ticker: 'LKOH',
+        link: 'https://profinansy.ru/market/instrument/SBER',
+        logo: 'https://files.profinansy.ru/api/data/ambqefduv/Lukoil_logo.png',
+        price: '5500 ₽',
+        note: '',
+        sector: 'Энергетика',
+        amount: 500,
+        'p/e': 6.2,
+        'p/s': 1.8,
+        'p/b': 1.3,
+        description: 'Лукойл — одна из крупнейших вертикально интегрированных нефтегазовых компаний России, занимающаяся разведкой, добычей, переработкой и сбытом нефти и газа.'
+    },
+    {
+        id: 4,
+        name: 'Норильский никель',
+        ticker: 'GMKN',
+        link: 'https://profinansy.ru/market/instrument/SBER',
+        logo: 'https://files.profinansy.ru/api/data/ambqefduv/Nornickel_logo.png',
+        price: '24000 ₽',
+        note: '',
+        sector: 'Металлургия',
+        amount: 300,
+        'p/e': 9.4,
+        'p/s': 3.7,
+        'p/b': 1.5,
+        description: 'Норильский никель — крупнейшая в мире компания по добыче никеля и палладия, занимающаяся также производством меди, платины и других драгоценных металлов.'
+    },
+    {
+        id: 5,
+        name: 'Татнефть',
+        ticker: 'TATN',
+        link: 'https://profinansy.ru/market/instrument/SBER',
+        logo: 'https://files.profinansy.ru/api/data/ambqefduv/Tatneft_logo.png',
+        price: '520 ₽',
+        note: '',
+        sector: 'Энергетика',
+        amount: 1500,
+        'p/e': 5.6,
+        'p/s': 1.6,
+        'p/b': 1.0,
+        description: 'Татнефть — одна из крупнейших нефтяных компаний России, занимающаяся разведкой, добычей, переработкой и сбытом нефти и нефтепродуктов.'
+    },
+    {
+        id: 6,
+        name: 'Ростелеком',
+        ticker: 'RTKM',
+        link: 'https://profinansy.ru/market/instrument/SBER',
+        logo: 'https://files.profinansy.ru/api/data/ambqefduv/Rostelecom_logo.png',
+        price: '85 ₽',
+        note: '',
+        sector: 'Телекоммуникации',
+        amount: 4000,
+        'p/e': 8.1,
+        'p/s': 0.9,
+        'p/b': 0.7,
+        description: 'Ростелеком — крупнейшая телекоммуникационная компания России, предоставляющая услуги фиксированной и мобильной связи, интернет-доступа и цифрового телевидения.'
+    },
+    {
+        id: 7,
+        name: 'МТС',
+        ticker: 'MTSS',
+        link: 'https://profinansy.ru/market/instrument/SBER',
+        logo: 'https://files.profinansy.ru/api/data/ambqefduv/MTS_logo.png',
+        price: '320 ₽',
+        note: '',
+        sector: 'Телекоммуникации',
+        amount: 1200,
+        'p/e': 9.0,
+        'p/s': 2.1,
+        'p/b': 1.4,
+        description: 'МТС — ведущий телекоммуникационный оператор в России, предоставляющий услуги мобильной связи, интернет-доступа и цифрового телевидения.'
+    },
+    {
+        id: 8,
+        name: 'Северсталь',
+        ticker: 'CHMF',
+        link: 'https://profinansy.ru/market/instrument/SBER',
+        logo: 'https://files.profinansy.ru/api/data/ambqefduv/Severstal_logo.png',
+        price: '1500 ₽',
+        note: '',
+        sector: 'Металлургия',
+        amount: 800,
+        'p/e': -5.2,
+        'p/s': 1.4,
+        'p/b': 1.0,
+        description: 'Северсталь — одна из крупнейших вертикально интегрированных металлургических и горнодобывающих компаний в России и мире.'
+    },
+    {
+        id: 9,
+        name: 'Яндекс',
+        ticker: 'YNDX',
+        link: 'https://profinansy.ru/market/instrument/SBER',
+        logo: 'https://files.profinansy.ru/api/data/ambqefduv/Yandex_logo.png',
+        price: '4900 ₽',
+        note: '',
+        sector: 'Технологии',
+        amount: 600,
+        'p/e': 30.5,
+        'p/s': 8.7,
+        'p/b': 5.6,
+        description: 'Яндекс — крупнейшая российская IT-компания, предоставляющая услуги поисковой системы, онлайн-рекламы, электронной коммерции и транспортных сервисов.'
+    },
+    {
+        id: 10,
+        name: 'Новатэк',
+        ticker: 'NVTK',
+        link: 'https://profinansy.ru/market/instrument/SBER',
+        logo: 'https://files.profinansy.ru/api/data/ambqefduv/Novatek_logo.png',
+        price: '1550 ₽',
+        note: '',
+        sector: 'Энергетика',
+        amount: 1000,
+        'p/e': 12.3,
+        'p/s': 3.5,
+        'p/b': 2.2,
+        description: 'Новатэк — крупнейшая независимая газовая компания в России, занимающаяся разведкой, добычей, переработкой и сбытом природного газа и жидких углеводородов.'
+    },
+    {
+        id: 11,
+        name: 'Российская группа компаний Интер РАО ЕЭС',
+        ticker: 'IRAO',
+        link: 'https://profinansy.ru/market/instrument/SBER',
+        logo: 'https://files.profinansy.ru/api/data/ambqefduv/InterRAO_logo.png',
+        price: '7 ₽',
+        note: '',
+        sector: 'Энергетика',
+        amount: 10000,
+        'p/e': -3.4,
+        'p/s': 0.8,
+        'p/b': 0.6,
+        description: 'Интер РАО ЕЭС — крупнейшая российская энергетическая компания, занимающаяся производством, экспортом и импортом электроэнергии, а также эксплуатацией энергетических объектов.'
+    },
+    {
+        id: 12,
+        name: 'Федеральная сетевая компания Единой энергетической системы',
+        ticker: 'FEES',
+        link: 'https://profinansy.ru/market/instrument/SBER',
+        logo: 'https://files.profinansy.ru/api/data/ambqefduv/FSK_EES_logo.png',
+        price: '0.25 ₽',
+        note: '',
+        sector: 'Энергетика',
+        amount: 50000,
+        'p/e': 5.1,
+        'p/s': 0.3,
+        'p/b': 0.4,
+        description: 'ФСК ЕЭС — крупнейшая в России энергетическая компания, управляющая единой национальной электрической сетью, обеспечивающая передачу электроэнергии и реализацию инвестиционных проектов в энергетике.'
+    }
+];
+exports.Hints = {
+    hint_1: [
+        'Title',
+        'Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.'
+    ]
+};
+exports.COLUMNS = [
+    {
+        title: 'Название',
+        key: 'name',
+        alignment: 'left',
+        maxWidth: '100px'
+    },
+    {
+        title: 'Заметка',
+        key: 'note',
+        alignment: 'left',
+        hint: 'hint_1'
+    },
+    {
+        title: 'Цена',
+        key: 'price',
+        alignment: 'right',
+        hint: 'hint_1',
+        sort: true
+    },
+    {
+        title: 'Количество',
+        key: 'amount',
+        alignment: 'right',
+        hint: 'hint_1',
+        sort: true
+    },
+    {
+        title: 'Сектор',
+        key: 'sector',
+        alignment: 'left',
+        hint: 'hint_1',
+        sort: true
+    },
+    {
+        title: 'Описание',
+        key: 'description',
+        alignment: 'left',
+        hint: 'hint_1',
+        maxWidth: '200px',
+        sort: true
+    },
+    {
+        title: 'P/E',
+        key: 'p/e',
+        alignment: 'right',
+        hint: 'hint_1',
+        sort: true
+    },
+    {
+        title: 'P/S',
+        key: 'p/s',
+        alignment: 'right',
+        hint: 'hint_1',
+        sort: true
+    },
+    {
+        title: 'P/B',
+        key: 'p/b',
+        alignment: 'right',
+        hint: 'hint_1',
+        sort: true
+    },
+    {
+        title: '',
+        key: 'action',
+        alignment: 'center'
+    }
+];
+//# sourceMappingURL=MockData.js.map

package/dist/components/uikit/Table/components/MockData.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MockData.js","sourceRoot":"","sources":["../../../../../src/components/uikit/Table/components/MockData.ts"],"names":[],"mappings":"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"}