Skip to content

Commit

Permalink
add responsiv simple styled table #104
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sonatai
Sonatai committed Jun 15, 2023
1 parent 0869a53 commit c500c3b
Show file tree
Hide file tree
Showing 3 changed files with 187 additions and 101 deletions.
49 changes: 35 additions & 14 deletions src/components/shared/Table/Table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,32 +8,53 @@ interface IRow {
}

interface ITable {
title?: string;
headers: string[];
rows: IRow[];
breakOn?: 'small' | 'medium' | 'large';
}

export const Table = (props: ITable) => {
const { headers, rows } = props;
const { breakOn = 'medium', headers, rows, title } = props;

let tableClass = 'table-container__table';

if (breakOn === 'small') {
tableClass += ' table-container__table--break-sm';
} else if (breakOn === 'medium') {
tableClass += ' table-container__table--break-md';
} else if (breakOn === 'large') {
tableClass += ' table-container__table--break-lg';
}

const data = rows.map((row) => {
return (
<tr key={nanoid()}>
{row.row.map((data, index) => (
<td key={nanoid()} data-heading={headers[index]}>
{data}
</td>
))}
</tr>
);
});

return (
<div className="table__container">
<table>
<div className="table-container">
{title !== undefined && title !== '' && (
<div className="table-container__title">
<h2>{title}</h2>
</div>
)}
<table className={tableClass}>
<thead>
<tr>
{headers.map((header) => (
<th key={nanoid()}>{header}</th>
{headers.map((col) => (
<th key={nanoid()}>{col}</th>
))}
</tr>
</thead>
<tbody>
{rows.map((row) => (
<tr key={nanoid()}>
{row.row.map((content) => (
<td key={nanoid()}>{content}</td>
))}
</tr>
))}
</tbody>
<tbody>{data}</tbody>
</table>
</div>
);
Expand Down
197 changes: 110 additions & 87 deletions src/components/shared/Table/styles.css
View file
Original file line number Diff line number Diff line change
@@ -1,110 +1,133 @@
.table__container {
display: flex;
justify-content: center;
/* margin: 20vh auto; */
width: full;
/* background-color: #fff; */
/* border-radius: 10px; */
/* padding: 5px; */
.table-container {
max-width: 800px;
width: 90%;
margin: 0 auto 40px;
}

table {
.table-container__title {
background-color: #e10600;
color: #fff;
text-align: center;
padding: 10px;
}
.table-container__title h2 {
font-size: 24px;
font-weight: 300;
}
.table-container__table {
width: 100%;
/* box-shadow: 15px 15px #ffffff0d; */
border-collapse: collapse;
}

tr:nth-of-type(odd) {
background-color: #006cc6;
color: #fff;
.table-container__table thead tr {
background-color: transparent;
}
tr:nth-of-type(even) {
background-color: #fff;
color: #333;
.table-container__table td,
.table-container__table th {
border: 1px solid #ddd;
padding: 10px;
text-align: center;
}

th {
background-color: #330835;
color: #fff;
font-weight: 800;
font-size: 20px;
}

td,
th {
padding: 12px;
/* border: 1px solid #ccc; */
vertical-align: baseline;
.table-container__table tr:nth-child(even) {
background-color: #f1f1f1;
}

@media only screen and (max-width: 768px),
(min-device-width: 768px) and (max-device-width: 992px) {
.table-container {
width: 95%;
background: transparent;
@media (max-width: 991px) {
.table-container__table--break-lg thead {
display: none;
}

table,
thead,
tbody,
th,
td,
tr {
.table-container__table--break-lg tr {
display: block;
margin-bottom: 5px;
}

thead tr {
.table-container__table--break-lg td {
display: block;
position: relative;
padding-left: 130px;
text-align: left;
border-bottom: 0;
}
.table-container__table--break-lg td:last-child {
border-bottom: 1px solid #ddd;
}
.table-container__table--break-lg td::before {
content: attr(data-heading);
position: absolute;
top: -9999px;
left: -9999px;
top: 0;
left: 0;
width: 120px;
height: 100%;
display: flex;
align-items: center;
background-color: #000;
color: #fff;
font-size: 0.75rem;
padding: 0 5px;
justify-content: center;
}

tr {
border: 1px solid #ccc;
margin-bottom: 10px;
}
@media (max-width: 767px) {
.table-container__table--break-md thead {
display: none;
}

td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
text-align: right;
.table-container__table--break-md tr {
display: block;
margin-bottom: 5px;
}

td::before {
position: absolute;
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
font-size: 16px;
font-weight: 600;
.table-container__table--break-md td {
display: block;
position: relative;
padding-left: 130px;
text-align: left;
border-bottom: 0;
}
.table-container__table--break-md td:last-child {
border-bottom: 1px solid #ddd;
}

td:nth-of-type(1)::before {
content: '#';
.table-container__table--break-md td::before {
content: attr(data-heading);
position: absolute;
top: 0;
left: 0;
width: 120px;
height: 100%;
display: flex;
align-items: center;
background-color: #000;
color: #fff;
font-size: 0.75rem;
padding: 0 5px;
justify-content: center;
}

td:nth-of-type(2)::before {
content: 'Full Name';
}
@media (max-width: 575px) {
.table-container__table--break-sm thead {
display: none;
}

td:nth-of-type(3)::before {
content: 'Age';
.table-container__table--break-sm tr {
display: block;
margin-bottom: 5px;
}

td:nth-of-type(4)::before {
content: 'Status';
.table-container__table--break-sm td {
display: block;
position: relative;
padding-left: 130px;
text-align: left;
border-bottom: 0;
}

td:nth-of-type(5)::before {
content: 'Job Title';
.table-container__table--break-sm td:last-child {
border-bottom: 1px solid #ddd;
}

td:nth-of-type(6)::before {
content: 'Action';
.table-container__table--break-sm td::before {
content: attr(data-heading);
position: absolute;
top: 0;
left: 0;
width: 120px;
height: 100%;
display: flex;
align-items: center;
background-color: #000;
color: #fff;
font-size: 0.75rem;
padding: 0 5px;
justify-content: center;
}
}
42 changes: 42 additions & 0 deletions src/pages/Home/Home.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,48 @@ export const Home = (): JSX.Element => {
],
},
]}
breakOn="large"
/>

<Table
headers={['shape', 'mode', 'expected']}
rows={[
{
row: [
'[2,3]',
'"fap"',
'(2x3):[\n[ -4.0 , -3.0 , -2.0 ],\n [ -1.0 , 0.0 , 1.0 ]\n]',
],
},
{
row: [
'[2,2,3,4]',
'"fp"',
'(2x2x3x4):[\n [\n [\n [ -4.0 , -3.0 , -2.0 , -1.0 ],\n [ 0.0 , 1.0 , 2.0 , 3.0 ],\n [ 4.0 , 5.0 , -4.0 , -3.0 ]\n ],\n [\n [ -2.0 , -1.0 , 0.0 , 1.0 ],\n [ 2.0 , 3.0 , 4.0 , 5.0 ],\n [ -4.0 , -3.0 , -2.0 , -1.0 ]\n ]\n ],\n [\n [\n [ 0.0 , 1.0 , 2.0 , 3.0 ],\n [ 4.0 , 5.0 , -4.0 , -3.0 ],\n [ -2.0 , -1.0 , 0.0 , 1.0 ]\n ],\n [\n [ 2.0 , 3.0 , 4.0 , 5.0 ],\n [ -4.0 , -3.0 , -2.0 , -1.0 ],\n [ 0.0 , 1.0 , 2.0 , 3.0 ]\n ]\n ]\n]',
],
},
]}
/>

<Table
headers={['shape', 'mode', 'expected']}
rows={[
{
row: [
'[2,3]',
'"fap"',
'(2x3):[\n[ -4.0 , -3.0 , -2.0 ],\n [ -1.0 , 0.0 , 1.0 ]\n]',
],
},
{
row: [
'[2,2,3,4]',
'"fp"',
'(2x2x3x4):[\n [\n [\n [ -4.0 , -3.0 , -2.0 , -1.0 ],\n [ 0.0 , 1.0 , 2.0 , 3.0 ],\n [ 4.0 , 5.0 , -4.0 , -3.0 ]\n ],\n [\n [ -2.0 , -1.0 , 0.0 , 1.0 ],\n [ 2.0 , 3.0 , 4.0 , 5.0 ],\n [ -4.0 , -3.0 , -2.0 , -1.0 ]\n ]\n ],\n [\n [\n [ 0.0 , 1.0 , 2.0 , 3.0 ],\n [ 4.0 , 5.0 , -4.0 , -3.0 ],\n [ -2.0 , -1.0 , 0.0 , 1.0 ]\n ],\n [\n [ 2.0 , 3.0 , 4.0 , 5.0 ],\n [ -4.0 , -3.0 , -2.0 , -1.0 ],\n [ 0.0 , 1.0 , 2.0 , 3.0 ]\n ]\n ]\n]',
],
},
]}
breakOn="small"
/>
<h1 className="home__headline">Neureka</h1>
<p className="home__description">
Expand Down

0 comments on commit c500c3b

Please sign in to comment.