Responsive Table in Styled Components

component-using-the-table.component.jsx

import React, {useState} from 'react';

// styled components
import {
  
} from './items.styles';

// components
import { DashboardContainer } from 'components/dashboard-container/dashboard-container.component';
import { Table } from 'components/table/table.component';

const ViewItemsPage = () => {
  const headings = [
    'Date',
    'Item Name',
    'Category',
    'Quantity',
    'Price by Piece',
    'Overall Price',
    'Description',
    'Image',
    'Quantity Left',
    'Status'
  ]

  return(
    <DashboardContainer title='Items'>
      <Table headings={headings} />
    </DashboardContainer>
  )

}

export default ViewItemsPage;

helpers.styles.jsx

export const tableStyles = css`
	table {
		width: 100%;
	}

	/* Force table to not be like tables anymore */
	table,
	thead,
	tbody,
	th,
	td,
	tr {
		display: block;
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	tr {
		border: 1px solid #ccc;
	}

	td {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		padding-left: 50%;
	}

	td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%;
		padding-right: 10px;
		white-space: nowrap;
		/* Label the data */
		content: attr(data-column);

		color: #000;
		font-weight: bold;
	}
`;

table.component.jsx

import React from 'react';

import {
  TableContainer
} from './table.styles'

export const Table = ({ headings }) => {
	return (
		<TableContainer>
			<thead>
				{headings.map((heading) => (
					<th>{heading}</th>
				))}
			</thead>
		</TableContainer>
	);
};

table.styles.jsx

import styled from 'styled-components';

import { helpers, breakpoints, tableStyles } from 'utilities/styles/helpers.styles';

const { mainTint } = helpers;
const { tabletPortrait, phone } = breakpoints;

export const TableContainer = styled.table`
	font-size: 1.8rem;
	color: ${mainTint};

	border-collapse: collapse;
	margin: 50px auto;

	/* Zebra striping */
	tr:nth-of-type(odd) {
		background: #eee;
	}

	th {
		background: #3498db;
		color: white;
		font-weight: bold;
	}

	td,
	th {
		padding: 10px;
		border: 1px solid #ccc;
		text-align: left;
		font-size: 18px;
	}

	@media ${phone} {
		${tableStyles};
	}

	@media ${tabletPortrait} {
		${tableStyles};
	}
`;