Responsive tables.

This commit is contained in:
Mike Cao 2020-08-17 22:47:58 -07:00
parent cb9dcc7300
commit 9f6e17b986
14 changed files with 26 additions and 31 deletions

View file

@ -9,7 +9,7 @@ export default function Table({ columns, rows, empty }) {
return (
<div className={styles.table}>
<div className={styles.header}>
<div className={classNames(styles.header, 'row')}>
{columns.map(({ key, label, className, style, header }) => (
<div
key={key}
@ -22,7 +22,7 @@ export default function Table({ columns, rows, empty }) {
</div>
<div className={styles.body}>
{rows.map((row, rowIndex) => (
<div className={styles.row} key={rowIndex}>
<div className={classNames(styles.row, 'row')} key={rowIndex}>
{columns.map(({ key, render, className, style, cell }) => (
<div
key={`${rowIndex}${key}`}

View file

@ -1,26 +1,22 @@
.table {
display: flex;
flex-direction: column;
flex: 1;
}
.header {
display: flex;
border-bottom: 1px solid var(--gray300);
}
.head {
font-size: var(--font-size-small);
font-weight: 600;
line-height: 40px;
flex: 1;
border-bottom: 1px solid var(--gray300);
}
.body {
position: relative;
display: flex;
flex-direction: column;
flex: 1;
}
.body:empty:before {
@ -33,7 +29,6 @@
}
.row {
display: flex;
border-bottom: 1px solid var(--gray300);
padding: 10px 0;
}
@ -41,5 +36,4 @@
.cell {
display: flex;
align-items: flex-start;
flex: 1;
}