feat: add table columns (#1056)

* feat: add table columns

Closes #879

* refactor: ComponentProps first

front/src/modules/ui/button/components/IconButtonGroup.tsx

@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { type ComponentProps } from 'react';
 import styled from '@emotion/styled';
 
-import { IconButtonSize, IconButtonVariant } from './IconButton';
+import type { IconButtonSize, IconButtonVariant } from './IconButton';
+
 const StyledIconButtonGroupContainer = styled.div`
   align-items: flex-start;
   background: ${({ theme }) => theme.background.transparent.primary};
@@ -11,24 +12,27 @@ const StyledIconButtonGroupContainer = styled.div`
   padding: ${({ theme }) => theme.spacing(0.5)};
 `;
 
-type IconButtonGroupProps = {
+type IconButtonGroupProps = Omit<ComponentProps<'div'>, 'children'> & {
   variant: IconButtonVariant;
   size: IconButtonSize;
-  children: React.ReactElement[];
+  children: React.ReactElement | React.ReactElement[];
 };
 
 export function IconButtonGroup({
   children,
   variant,
   size,
+  ...props
 }: IconButtonGroupProps) {
   return (
-    <StyledIconButtonGroupContainer>
-      {React.Children.map(children, (child) =>
-        React.cloneElement(child, {
-          ...(variant ? { variant } : {}),
-          ...(size ? { size } : {}),
-        }),
+    <StyledIconButtonGroupContainer {...props}>
+      {React.Children.map(
+        Array.isArray(children) ? children : [children],
+        (child) =>
+          React.cloneElement(child, {
+            ...(variant ? { variant } : {}),
+            ...(size ? { size } : {}),
+          }),
       )}
     </StyledIconButtonGroupContainer>
   );