Refactor buttons.

components/Table.js

@@ -1,25 +1,32 @@
 import React from 'react';
+import classNames from 'classnames';
 import styles from './Table.module.css';
 
 export default function Table({ columns, rows }) {
   return (
-    <table className={styles.table}>
-      <thead>
-        <tr>
-          {columns.map(({ key, label }) => (
-            <th key={key}>{label}</th>
-          ))}
-        </tr>
-      </thead>
-      <tbody>
-        {rows.map((row, rowIndex) => (
-          <tr key={rowIndex}>
-            {columns.map(({ key }) => (
-              <td key={`${rowIndex}${key}`}>{row[key]}</td>
-            ))}
-          </tr>
+    <div className={styles.table}>
+      <div className={styles.header}>
+        {columns.map(({ key, label }) => (
+          <div key={key} className={styles.head}>
+            {label}
+          </div>
         ))}
-      </tbody>
-    </table>
+      </div>
+      <div className={styles.body}>
+        {rows.map((row, rowIndex) => (
+          <div className={styles.row} key={rowIndex}>
+            {columns.map(({ key, render, className, style }) => (
+              <div
+                key={`${rowIndex}${key}`}
+                className={classNames(styles.cell, className)}
+                style={style}
+              >
+                {render ? render(row) : row[key]}
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
   );
 }