BaseTable v2.0.0

Docs API Examples Playground

Github

Custom Row

Function as renderer

row-0 | | Row 0 - Col 0 | Row 0 - Col 1 | Row 0 - Col 2 | Row 0 - Col 3 | Row 0 - Col 4 | Row 0 - Col 5 | Row 0 - Col 6 | Row 0 - Col 7 | Row 0 - Col 8 | Row 0 - Col 9

row-1 | | Row 1 - Col 0 | Row 1 - Col 1 | Row 1 - Col 2 | Row 1 - Col 3 | Row 1 - Col 4 | Row 1 - Col 5 | Row 1 - Col 6 | Row 1 - Col 7 | Row 1 - Col 8 | Row 1 - Col 9

row-2 | | Row 2 - Col 0 | Row 2 - Col 1 | Row 2 - Col 2 | Row 2 - Col 3 | Row 2 - Col 4 | Row 2 - Col 5 | Row 2 - Col 6 | Row 2 - Col 7 | Row 2 - Col 8 | Row 2 - Col 9

row-3 | | Row 3 - Col 0 | Row 3 - Col 1 | Row 3 - Col 2 | Row 3 - Col 3 | Row 3 - Col 4 | Row 3 - Col 5 | Row 3 - Col 6 | Row 3 - Col 7 | Row 3 - Col 8 | Row 3 - Col 9

row-4 | | Row 4 - Col 0 | Row 4 - Col 1 | Row 4 - Col 2 | Row 4 - Col 3 | Row 4 - Col 4 | Row 4 - Col 5 | Row 4 - Col 6 | Row 4 - Col 7 | Row 4 - Col 8 | Row 4 - Col 9

row-5 | | Row 5 - Col 0 | Row 5 - Col 1 | Row 5 - Col 2 | Row 5 - Col 3 | Row 5 - Col 4 | Row 5 - Col 5 | Row 5 - Col 6 | Row 5 - Col 7 | Row 5 - Col 8 | Row 5 - Col 9

row-6 | | Row 6 - Col 0 | Row 6 - Col 1 | Row 6 - Col 2 | Row 6 - Col 3 | Row 6 - Col 4 | Row 6 - Col 5 | Row 6 - Col 6 | Row 6 - Col 7 | Row 6 - Col 8 | Row 6 - Col 9

row-7 | | Row 7 - Col 0 | Row 7 - Col 1 | Row 7 - Col 2 | Row 7 - Col 3 | Row 7 - Col 4 | Row 7 - Col 5 | Row 7 - Col 6 | Row 7 - Col 7 | Row 7 - Col 8 | Row 7 - Col 9

Component as renderer

row-0 | | Row 0 - Col 0 | Row 0 - Col 1 | Row 0 - Col 2 | Row 0 - Col 3 | Row 0 - Col 4 | Row 0 - Col 5 | Row 0 - Col 6 | Row 0 - Col 7 | Row 0 - Col 8 | Row 0 - Col 9

row-1 | | Row 1 - Col 0 | Row 1 - Col 1 | Row 1 - Col 2 | Row 1 - Col 3 | Row 1 - Col 4 | Row 1 - Col 5 | Row 1 - Col 6 | Row 1 - Col 7 | Row 1 - Col 8 | Row 1 - Col 9

row-2 | | Row 2 - Col 0 | Row 2 - Col 1 | Row 2 - Col 2 | Row 2 - Col 3 | Row 2 - Col 4 | Row 2 - Col 5 | Row 2 - Col 6 | Row 2 - Col 7 | Row 2 - Col 8 | Row 2 - Col 9

row-3 | | Row 3 - Col 0 | Row 3 - Col 1 | Row 3 - Col 2 | Row 3 - Col 3 | Row 3 - Col 4 | Row 3 - Col 5 | Row 3 - Col 6 | Row 3 - Col 7 | Row 3 - Col 8 | Row 3 - Col 9

row-4 | | Row 4 - Col 0 | Row 4 - Col 1 | Row 4 - Col 2 | Row 4 - Col 3 | Row 4 - Col 4 | Row 4 - Col 5 | Row 4 - Col 6 | Row 4 - Col 7 | Row 4 - Col 8 | Row 4 - Col 9

row-5 | | Row 5 - Col 0 | Row 5 - Col 1 | Row 5 - Col 2 | Row 5 - Col 3 | Row 5 - Col 4 | Row 5 - Col 5 | Row 5 - Col 6 | Row 5 - Col 7 | Row 5 - Col 8 | Row 5 - Col 9

row-6 | | Row 6 - Col 0 | Row 6 - Col 1 | Row 6 - Col 2 | Row 6 - Col 3 | Row 6 - Col 4 | Row 6 - Col 5 | Row 6 - Col 6 | Row 6 - Col 7 | Row 6 - Col 8 | Row 6 - Col 9

row-7 | | Row 7 - Col 0 | Row 7 - Col 1 | Row 7 - Col 2 | Row 7 - Col 3 | Row 7 - Col 4 | Row 7 - Col 5 | Row 7 - Col 6 | Row 7 - Col 7 | Row 7 - Col 8 | Row 7 - Col 9

Element as renderer

row-0 | | Row 0 - Col 0 | Row 0 - Col 1 | Row 0 - Col 2 | Row 0 - Col 3 | Row 0 - Col 4 | Row 0 - Col 5 | Row 0 - Col 6 | Row 0 - Col 7 | Row 0 - Col 8 | Row 0 - Col 9

row-1 | | Row 1 - Col 0 | Row 1 - Col 1 | Row 1 - Col 2 | Row 1 - Col 3 | Row 1 - Col 4 | Row 1 - Col 5 | Row 1 - Col 6 | Row 1 - Col 7 | Row 1 - Col 8 | Row 1 - Col 9

row-2 | | Row 2 - Col 0 | Row 2 - Col 1 | Row 2 - Col 2 | Row 2 - Col 3 | Row 2 - Col 4 | Row 2 - Col 5 | Row 2 - Col 6 | Row 2 - Col 7 | Row 2 - Col 8 | Row 2 - Col 9

row-3 | | Row 3 - Col 0 | Row 3 - Col 1 | Row 3 - Col 2 | Row 3 - Col 3 | Row 3 - Col 4 | Row 3 - Col 5 | Row 3 - Col 6 | Row 3 - Col 7 | Row 3 - Col 8 | Row 3 - Col 9

row-4 | | Row 4 - Col 0 | Row 4 - Col 1 | Row 4 - Col 2 | Row 4 - Col 3 | Row 4 - Col 4 | Row 4 - Col 5 | Row 4 - Col 6 | Row 4 - Col 7 | Row 4 - Col 8 | Row 4 - Col 9

row-5 | | Row 5 - Col 0 | Row 5 - Col 1 | Row 5 - Col 2 | Row 5 - Col 3 | Row 5 - Col 4 | Row 5 - Col 5 | Row 5 - Col 6 | Row 5 - Col 7 | Row 5 - Col 8 | Row 5 - Col 9

row-6 | | Row 6 - Col 0 | Row 6 - Col 1 | Row 6 - Col 2 | Row 6 - Col 3 | Row 6 - Col 4 | Row 6 - Col 5 | Row 6 - Col 6 | Row 6 - Col 7 | Row 6 - Col 8 | Row 6 - Col 9

row-7 | | Row 7 - Col 0 | Row 7 - Col 1 | Row 7 - Col 2 | Row 7 - Col 3 | Row 7 - Col 4 | Row 7 - Col 5 | Row 7 - Col 6 | Row 7 - Col 7 | Row 7 - Col 8 | Row 7 - Col 9

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


const Title = styled.h4`
  font-size: 16px;
  color: #819099;
  margin-top: 20px;
  margin-bottom: 10px;
`


const Row = styled.div`
  padding: 0 15px;
`


const rowRenderer = ({ rowData, ...rest }) => (
  <Row {...rest}>{Object.values(rowData).join(' | ')}</Row>
)


class RowComponent extends React.Component {
  render() {
    const { rowData, ...rest } = this.props
    return <Row {...rest}>{Object.values(rowData).join(' | ')}</Row>
  }
}


export default () => (
  <React.Fragment>
    <Title>Function as renderer</Title>
    <Table columns={columns} data={data} rowRenderer={rowRenderer} />
    <Title>Component as renderer</Title>
    <Table columns={columns} data={data} rowRenderer={RowComponent} />
    <Title>Element as renderer</Title>
    <Table columns={columns} data={data} rowRenderer={<RowComponent />} />
  </React.Fragment>
)

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

const Title = styled.h4`
  font-size: 16px;
  color: #819099;
  margin-top: 20px;
  margin-bottom: 10px;
`

const Row = styled.div`
  padding: 0 15px;
`

const rowRenderer = ({ rowData, ...rest }) => (
  <Row {...rest}>{Object.values(rowData).join(' | ')}</Row>
)

class RowComponent extends React.Component {
  render() {
    const { rowData, ...rest } = this.props
    return <Row {...rest}>{Object.values(rowData).join(' | ')}</Row>
  }
}

export default () => (
  <React.Fragment>
    <Title>Function as renderer</Title>
    <Table columns={columns} data={data} rowRenderer={rowRenderer} />
    <Title>Component as renderer</Title>
    <Table columns={columns} data={data} rowRenderer={RowComponent} />
    <Title>Element as renderer</Title>
    <Table columns={columns} data={data} rowRenderer={<RowComponent />} />
  </React.Fragment>
)

← Custom Components

Custom Header→