Form/PaymentsTable: split table to groups

Components/Calculation/Form/Payments/PaymentsTable/config.tsx

@@ -4,20 +4,26 @@ import InputNumber from 'Elements/InputNumber';
 
 import { buildValueComponent } from './builders';
 
-export const columns: ColumnsType<number> = [
+type Payment = {
+  key: number;
+  num: number;
+  paymentRelation: number;
+};
+
+export const columns: ColumnsType<Payment> = [
   {
     key: 'num',
     dataIndex: 'num',
     title: '#',
     width: '7%',
-    render: (_value, _payment, index) => index + 1,
+    render: (_value, payment) => payment.num + 1,
   },
   {
     key: 'paymentRelation',
     dataIndex: 'paymentRelation',
     title: '% платежа',
-    render: (_value, _payment, index) => {
-      const Component = buildValueComponent(index, InputNumber);
+    render: (_value, payment) => {
+      const Component = buildValueComponent(payment.num, InputNumber);
 
       return <Component />;
     },

Components/Calculation/Form/Payments/PaymentsTable/index.jsx

@@ -1,11 +1,13 @@
-import { MAX_LEASING_PERIOD } from 'constants/values';
 import Alert from 'Elements/Alert';
 import Table from 'Elements/Table';
+import { chunk } from 'lodash';
 import { toJS } from 'mobx';
 import { observer } from 'mobx-react-lite';
+import { useMemo } from 'react';
 import { useStore } from 'stores/hooks';
 import styled from 'styled-components';
-import { Flex } from 'UIKit/grid';
+import { Box, Flex } from 'UIKit/grid';
+import { min } from 'UIKit/mq';
 import { columns } from './config';
 
 const Grid = styled(Flex)`
@@ -18,6 +20,16 @@ const TableWrapper = styled.div`
   }
 `;
 
+const TablesGroupGrid = styled(Box)`
+  display: flex;
+  flex-direction: column;
+  ${min('laptop')} {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 5px;
+  }
+`;
+
 const Validation = observer(() => {
   const store = useStore();
   const { payments } = store.$tables;
@@ -31,39 +43,41 @@ const Validation = observer(() => {
   return null;
 });
 
-const PaymentsTable = observer(() => {
+const SPLIT_NUMBER = 12;
+
+const TablesGroup = observer(() => {
   const store = useStore();
   const { payments } = store.$tables;
 
   const values = toJS(payments.values);
 
-  const dataSource = values.map((value, index) => ({
-    key: index,
-    num: index,
-    paymentRelation: value,
-  }));
-
-  return (
-    <TableWrapper>
-      <Table
-        size="small"
-        columns={columns}
-        dataSource={dataSource}
-        pagination={{
-          defaultPageSize: 12,
-          pageSizeOptions: [12, MAX_LEASING_PERIOD],
-          responsive: true,
-          showSizeChanger: true,
-        }}
-      />
-    </TableWrapper>
+  const data = useMemo(
+    // prettier-ignore
+    () => values.map((value, index) => ({
+      key: index,
+      num: index,
+      paymentRelation: value,
+    })),
+    [values]
   );
+
+  const tables = useMemo(
+    // prettier-ignore
+    () => chunk(data, SPLIT_NUMBER).map((dataSource) => (
+      <TableWrapper>
+        <Table size="small" columns={columns} dataSource={dataSource} pagination={false} />
+      </TableWrapper>
+      )),
+    [data]
+  );
+
+  return <TablesGroupGrid>{tables}</TablesGroupGrid>;
 });
 
-export default function () {
+export default function TablePayments() {
   return (
     <Grid>
-      <PaymentsTable />
+      <TablesGroup />
       <Validation />
     </Grid>
   );