fix(table): update styles

[reme3d2y]

1. Фикс иконок
2. Выравнивание по верхнему краю (пришлось добавить 1px margin-top иконке)
3. Защитный отступ 4px у ячеек шапки
4. Автоскролл у враппера

Код потестить

const data = [
  {
    id: 1,
    date: "27.06.2022",
    title: "ИП Жуков Валерий Сергеевич",
    subtitle: "Услуги по ремонту за июнь, НДС не облагается",
    sum: 21000000,
  },
  {
    id: 2,
    date: "28.06.2022",
    title: 'ОБЩЕСТВО С ОГРАНИЧЕННОЙ ОТВЕТСТВЕННОСТЬЮ "МОБИЛСТИЛ"',
    subtitle:
      "Оказание услуг по договору № 26/09 на основании акта № 1450 от 30 июня 2020 года, в т.ч. НДС 18%",
    sum: 10002030,
  },
  {
    id: 3,
    date: "29.06.2022",
    title: 'ООО "КОРПУС-ИТ"',
    sum: 3000069,
  },
  {
    id: 4,
    date: "30.06.2022",
    title: "MasterBrok",
    sum: 42130000,
  },
];
render(() => {
  const [sortKey, setSortKey] = React.useState(undefined);
  const [isSortedDesc, setIsSortedDesc] = React.useState(undefined);
  const defaultIsSortedDesc = false;
  const handleSort = (key) => {
    setSortKey(key);
    if (isSortedDesc !== undefined) {
      setIsSortedDesc(!isSortedDesc ? undefined : defaultIsSortedDesc);
    } else {
      setIsSortedDesc(!defaultIsSortedDesc);
    }
  };
  const sortedData = React.useMemo(() => {
    if (!sortKey || isSortedDesc === undefined) return data;
    return [...data].sort((a, b) => {
      if (sortKey === "sum") {
        return isSortedDesc ? b.sum - a.sum : a.sum - b.sum;
      }
      if (sortKey === "date") {
        return isSortedDesc
          ? b.date.localeCompare(a.date)
          : a.date.localeCompare(b.date);
      }
    });
  }, [data, isSortedDesc, sortKey]);
  return (
    <div style={{ margin: "24px 0 40px" }}>
      <Table>
        <Table.THead>
          <Table.TSortableHeadCell
            title="Дата"
            defaultIsSortedDesc={defaultIsSortedDesc}
            isSortedDesc={sortKey === "date" ? isSortedDesc : undefined}
            onSort={() => handleSort("date")}
          >
            Дата
          </Table.TSortableHeadCell>

          <Table.THeadCell title="Контрагент">Контрагент</Table.THeadCell>

          <Table.TSortableHeadCell
            title="Сумма"
            isSortedDesc={sortKey === "sum" ? isSortedDesc : undefined}
            onSort={() => handleSort("sum")}
          >
            Сумма
          </Table.TSortableHeadCell>
          
          <Table.TSortableHeadCell
            title="Сумма"
            isSortedDesc={sortKey === "sum" ? isSortedDesc : undefined}
            onSort={() => handleSort("sum")}
          >
            Сумма в несколько строк
          </Table.TSortableHeadCell>
          
          <Table.TSortableHeadCell
            title="Сумма"
            isSortedDesc={sortKey === "sum" ? isSortedDesc : undefined}
            onSort={() => handleSort("sum")}
          >
            Сумма в несколько строк
          </Table.TSortableHeadCell>
        </Table.THead>
        <Table.TBody>
          {sortedData.map((row) => (
            <Table.TRow key={row.id}>
              <Table.TCell>
                <Typography.Text view="primary-small" tag="div">
                  {row.date}
                </Typography.Text>
              </Table.TCell>

              <Table.TCell>
                <Space size={2}>
                  <Typography.Text view="primary-small" tag="div">
                    {row.title}
                  </Typography.Text>
                  <Typography.Text view="primary-small" color="secondary">
                    {row.subtitle}
                  </Typography.Text>
                </Space>
              </Table.TCell>

              <Table.TCell>
                <Amount
                  value={row.sum}
                  currency="RUR"
                  minority={100}
                  view="withZeroMinorPart"
                />
              </Table.TCell>
              
              <Table.TCell>
                <Amount
                  value={row.sum}
                  currency="RUR"
                  minority={100}
                  view="withZeroMinorPart"
                />
              </Table.TCell>
              
              <Table.TCell>
                <Amount
                  value={row.sum}
                  currency="RUR"
                  minority={100}
                  view="withZeroMinorPart"
                />
              </Table.TCell>
            </Table.TRow>
          ))}
        </Table.TBody>
      </Table>
    </div>
  );
});

[alfa-bot]

Собрана новая демка.

[alfa-bot]

🎉 This PR is included in version 25.8.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀