Realtime header component.

components/common/Table.js

@@ -10,6 +10,7 @@ export default function Table({
   className,
   bodyClassName,
   rowKey,
+  showHeader = true,
   children,
 }) {
   if (empty && rows.length === 0) {
@@ -18,17 +19,19 @@ export default function Table({
 
   return (
     <div className={classNames(styles.table, className)}>
-      <div className={classNames(styles.header, 'row')}>
-        {columns.map(({ key, label, className, style, header }) => (
-          <div
-            key={key}
-            className={classNames(styles.head, className, header?.className)}
-            style={{ ...style, ...header?.style }}
-          >
-            {label}
-          </div>
-        ))}
-      </div>
+      {showHeader && (
+        <div className={classNames(styles.header, 'row')}>
+          {columns.map(({ key, label, className, style, header }) => (
+            <div
+              key={key}
+              className={classNames(styles.head, className, header?.className)}
+              style={{ ...style, ...header?.style }}
+            >
+              {label}
+            </div>
+          ))}
+        </div>
+      )}
       <div className={classNames(styles.body, bodyClassName)}>
         {rows.length === 0 && <NoData />}
         {!children &&

components/common/Table.module.css

@@ -4,7 +4,6 @@
 }
 
 .header {
-  display: flex;
   border-bottom: 1px solid var(--gray300);
 }
 
@@ -21,7 +20,6 @@
 }
 
 .row {
-  display: flex;
   border-bottom: 1px solid var(--gray300);
   padding: 10px 0;
 }

components/common/Tag.module.css

@@ -1,5 +1,4 @@
 .tag {
-  font-size: var(--font-size-small);
   padding: 2px 4px;
   border: 1px solid var(--gray300);
   border-radius: 4px;