table.tsx

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;

.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;
    }
}