React

by Tonio Loewald

HTML

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

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

const rows = [
	{id: 'NCC-1701', name: 'Enterprise', captain: 'Kirk'},
  {id: 'XCV 330', name: 'Enterprise', captain: 'Kirk'},
  {id: 'NCC-1701-A', name: 'Enterprise', captain: 'Kirk'},
  {id: 'NCC-1701-D', name: 'Enterprise', captain: 'Picard'},
  {id: 'NX-01', name: 'Enterprise', captain: 'Archer'},
  {id: 'NCC-1701-B', name: 'Enterprise', captain: 'Harriman'},
  {id: 'NCC-1701-C', name: 'Enterprise', captain: 'Garrett'},
  {id: 'NCC-1701-D refit', name: 'Enterprise', captain: 'Riker'},
  {id: 'NCC-1701-J', name: 'Enterprise', captain: 'Dax'},
  {id: 'NCC-74656', name: 'Voyager', captain: 'Janeway'},
  {id: 'NCC-1031', name: 'Discovery', captain: 'Lorca'},
  {id: 'NX-74205', name: 'Defiant', captain: 'Sisko'}
]

const cellStyle = {
  position: 'relative',
	padding: '5px 10px',
}
const HeaderCell = text => <b style={cellStyle}>{text}</b>
const ContentCell = text => <span style={cellStyle}>{text}</span>

const columnResizerStyle = {
	position: 'absolute',
  top: 0,
  right: '-10px',
  height: '100%',
  width: '20px',
  cursor: 'col-resize',
  zIndex: 2
}
const verticalLineStyle = {
	position: 'absolute',
	left: '9px',
	width: '1px',
  background: '#00000020',
  height: '100%'
}

const ColumnResizer = () => <span style={columnResizerStyle}>
  <span style={verticalLineStyle}></span>
</span>
const ResizeableHeaderStyle = props => (
	<b style={cellStyle}>
    <span>{text}</span>
    <ColumnResizer />
  </b>)

const config = {
	columns: [
    {
      head: ResizeableHeaderStyle('Ship'),
      cell: x => ContentCell(x.id + ' ' + x.name),
      width: 250
    },
    {
    	head: ResizeableHeaderStyle('Captain'),
      cell: x => ContentCell(x.captain),
      width: 150
    }
  ]
}

const rowStyle = {
	display: 'grid',
  gridTemplateColumns: 'var(--columns)'
}

const headerRow = props => {
	const {config: {columns}} = props
	return (<div key={-1} style={rowStyle}>
    {columns.map(c => c.head)}
  </div>)
}

const contentRow = props => {
	const {row, columns, key} =...