const titles = [
"Id",
"Type",
"Name",
"Category",
"Client",
"Date",
"Watched",
"Amount",
"State",
"Delete"
];
const data = [
{
id: 23,
type: "test",
name: "joaaaahnny cageasdasdasd cageasdasdasd cageasdasdasd cageasdasdasd",
category: "selasdasler",
client: "custom",
date: "01-01-2019",
watched: "yes",
amount: 1231,
state: "pending",
delete: "button"
},
{
id: 211,
type: "test",
name: "johnny cage",
category: "seller",
client: "custsdsom",
date: "01-01-2019",
watched: "yes",
amount: 1231,
state: "pending",
delete: "button"
},
{
id: 2222,
type: "test",
name: "johnny cage",
category: "seller",
client: "custom",
date: "01-01-2019",
watched: "yes",
amount: 1231,
state: "pending",
delete: "button"
},
{
id: 2222,
type: "test",
name: "johnny cage",
category: "seller",
client: "custom",
date: "01-01-2019",
watched: "yes",
amount: 1231,
state: "pending",
delete: "button"
},
{
id: 2222,
type: "test",
name: "johnny cage",
category: "seller",
client: "custom",
date: "01-01-2019",
watched: "yes",
amount: 1231,
state: "pending",
delete: "button"
},
{
id: 2222,
type: "test",
name: "johnny cage",
category: "seller",
client: "custom",
date: "01-01-2019",
watched: "yes",
amount: 1231,
state: "pending",
delete: "button"
},
{
id: 2222,
type: "test",
name: "johnny cage",
category: "seller",
client: "custom",
date: "01-01-2019",
watched: "yes",
amount: 1231,
state: "pending",
delete: "button"
}
];
const TableWrapperUI = styled.div`
display: grid;
box-sizing: border-box;
width: 100%;
border: 1px solid #dbeaf4;
grid-template-columns: repeat(
${props => props.columns && props.columns},
minmax(auto, max-content)
);
padding: 5px;
> * {
padding: 5px;
}
`;
const LineUI = styled.div`
display: contents;
> * {
padding: 5px;
border-bottom: 1px solid #dbeaf4;
}
:hover > * {
background-color: #dbeaf4;
cursor: pointer;
overflow: visible;
}
`;
const Table = ({ children, titles, data }) => {
const [amountColumns, setAmountColumns] = React.useState(0);
React.useEffect(() => {
setAmountColumns(titles.length);
}, []);
const displayData = data => {
return data.map((x, idx) => {
return (
<React.Fragment key={idx}>
<LineUI>
{Object.keys(x).map((value, ids) => (
<span key={ids}>{x[value]}</span>
))}
</LineUI>
</React.Fragment>
);
});
};
const displayTitles = titles => {
return titles.map((title, idx) => {
return <span key={idx}>{title}</span>;
});
};
return (
amountColumns > 0 && (
<TableWrapperUI columns={amountColumns}>
{displayTitles(titles)}
{displayData(data)}
</TableWrapperUI>
)
);
};
function App() {
return (
<div className="App">
<Table columns={10} titles={titles} data={data} />
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/styled-components/4.3.2/styled-components.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<div id="root"></div>