JSFiddle - React, Tailwind, and code Playground

by charliebratches

HTML

<html>
  <head>
  </head>
  <div id="app" />
</html>

CSS

.pseudo-table {
  display: table;
  width: 100%;
  min-width: 100px;
}

.pseudo-table > * {
  display: table-row;
}

.pseudo-table .col {
  display: table-cell;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 32px;
}

React

class AccordianTable extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	rows: [
      	{ id: 0, 
        	isOpen: false, 
          a: '1', 
          b: '2: some text', 
          c: '3',
        	subRow: {a: 'a', b: 'b: long text text text text jkjsakljfljsafjjsdaljfajslkjf', c: 'c'},
        },
        { id: 1, 
        	isOpen: false, 
          a: '1: long text content affecting column width', 
          b: '2', 
          c: '3', 
          subRow: {a: 'd', b: 'e', c: 'f'},
        },
      ]
    }
  }
  
  render() {
    const { rows } = this.state;
    
    const onClick = id => {
    	this.setState({
        rows: rows.map(r => {
        	return {...r, isOpen: r.id === id ? !r.isOpen : r.isOpen}
        })
      });
    }
    
    const subRow = props => (
      <div class="row">
        <div class="col2">{props.a}</div>
        <div class="col2">{props.b}</div>
        <div class="col2">{props.c}</div>
      </div>
    )
    
    return (
      <div class='pseudo-table'>
        <header>
          <div class="col">Column A</div>
          <div class="col">Column B</div>
          <div class="col">Column C</div>
          <div class="col"></div>
        </header>
        {rows.map(row => (
        	<React.Fragment>
            <div key={row.id} class="row">
              <div class="col">{row.a}</div>
              <div class="col">{row.b}</div>
              <div class="col">{row.c}</div>
              <div class="col">
                <button onClick={() => onClick(row.id)}>
                  {row.isOpen 
                  	? <React.Fragment>đź”˝</React.Fragment>
                    : <React.Fragment>▶️</React.Fragment>
                  }
                </button>
              </div>
            </div>
            {row.isOpen ? subRow(row.subRow) : null}
          </React.Fragment>
        ))}
      </div>
    )
  }
}

ReactDOM.render(<AccordianTable />, document.querySelector("#app"))