Flex Column(column width in ratio)

Row 0 - Col 0

Row 0 - Col 1

Row 0 - Col 2

Row 0 - Col 3

Row 0 - Col 4

Row 1 - Col 0

Row 1 - Col 1

Row 1 - Col 2

Row 1 - Col 3

Row 1 - Col 4

Row 2 - Col 0

Row 2 - Col 1

Row 2 - Col 2

Row 2 - Col 3

Row 2 - Col 4

Row 3 - Col 0

Row 3 - Col 1

Row 3 - Col 2

Row 3 - Col 3

Row 3 - Col 4

Row 4 - Col 0

Row 4 - Col 1

Row 4 - Col 2

Row 4 - Col 3

Row 4 - Col 4

Row 5 - Col 0

Row 5 - Col 1

Row 5 - Col 2

Row 5 - Col 3

Row 5 - Col 4

Row 6 - Col 0

Row 6 - Col 1

Row 6 - Col 2

Row 6 - Col 3

Row 6 - Col 4

Row 7 - Col 0

Row 7 - Col 1

Row 7 - Col 2

Row 7 - Col 3

Row 7 - Col 4

const columns = generateColumns(10)
const data = generateData(columns, 200)

export default () => (
  <Table data={data}>
    <Column {...columns[0]} width={100} flexGrow={1} flexShrink={0} />
    <Column {...columns[1]} width={0} flexGrow={2} />
    <Column {...columns[2]} width={0} flexGrow={3} />
    <Column {...columns[3]} width={0} flexGrow={4} />
    <Column {...columns[4]} width={0} flexGrow={5} />
  </Table>
)

const columns = generateColumns(10)
const data = generateData(columns, 200)

export default () => (
  <Table data={data}>
    <Column {...columns[0]} width={100} flexGrow={1} flexShrink={0} />
    <Column {...columns[1]} width={0} flexGrow={2} />
    <Column {...columns[2]} width={0} flexGrow={3} />
    <Column {...columns[3]} width={0} flexGrow={4} />
    <Column {...columns[4]} width={0} flexGrow={5} />
  </Table>
)

← JSX Column

Custom Cell→