Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import React from 'react';
interface TableProps {
data: any[];
headings?: string[]
}
function Table(props: TableProps): JSX.Element {
const { data = [], headings } = props;
const cssGridWidth = {
gridTemplateColumns: `repeat(${data[0] !== undefined ? Object.keys(data[0]).length : 0}, 1fr)`
};
return (
<div className="table">
<div className='table-heading' style={cssGridWidth}>
{ data.length > 0 &&
Object.keys(data[0]).map((key: string) => (
<div className="table-column" key={key}>{key}</div>
))
}
</div>
{
data.map((object: any, idx: number) => {
return (
<div className='table-row' key={idx} style={cssGridWidth}>
{
Object.keys(object).map((key: string) => {
const value = object[key];
return (
<div className="table-column" key={`${key}-${value}`}>
{value}
</div>
)
})
}
</div>
)
})
}
</div>
)
}
export default Table;
@noudadrichem

This comment has been minimized.

Copy link
Owner Author

@noudadrichem noudadrichem commented Jun 18, 2020

.table {
    &-heading,
    &-row {
        display: grid;
        // grid-template-columns: repeat(9, 1fr);
        margin-bottom: 16px;
    }

    &-heading {
        font-weight: bolder;
        background-color: var(--gray-light);
        margin-top: 6px;
    }

    &-row {
        border-bottom: 1px solid var(--gray);
    }

    &-column {
        padding: 8px;
    }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment