Css Grid Can't Display Data On Next Row

I just started working with grid, making table component on React . Passing head titles and data as a props. I set repeat(auto-fit, minmax(10px, 1fr)); to my fit all head titles in

Solution 1:

You can use table tag to format data properly.

import React, { Fragment, useState } from "react";
import styled, { css } from "styled-components";

const TableWrapperUI = styled.div`
  display: grid;
  box-sizing: border-box;
  width: 100%;
  border: 1px solid black;
  grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));
  justify-items: center;
  grid-gap: 5px;
  padding: 5px;
`;

const Table = ({ columns, children, titles, data }) => {
  const [collapseElements, setCollapse] = useState({});

  const displayData = data => {
    for (let i = 0; i < data.length; i++) {
      return Object.keys(data[i]).map((value, ids) => {
        return <td key={ids}>{data[i][value]} </td>;
      });
    }
  };
  const displayTitles = titles => {
    return titles.map((title, idx) => {
      return <th key={idx}>{title}</th>;
    });
  };

  return (
    <>
      <TableWrapperUI columns={columns}>
        <table>
          <thead>
            <tr>{displayTitles(titles)}</tr>
          </thead>
          <tbody>
            <tr>{displayData(data)}</tr>
          </tbody>
        </table>
      </TableWrapperUI>
    </>
  );
};
export default Table;