class Example extends React.Component {

  state = {
    sortBy: 'name',
    sortDir: 'asc',
    columnWidths: {},
    columnsOrder: []
  }

  rowHeight = 40;

  onSortChange = ({ sortBy, sortDir }) => {
    this.setState({ sortBy, sortDir });
  };

  onColumnResize = ({ width, key }) => {
    this.setState({
      columnWidths: {
        ...this.state.columnWidths,
        [key]: parseInt(width)
      }
    });
  };

  onRowsSelect = (selectedRows) => {
    this.setState({ selectedRows });
  }

  onColumnsReorder = (columnsOrder) => {
    this.setState({ columnsOrder });
  }

  render() {

    const {
      rowHeight, onSortChange, onColumnResize, onRowsSelect, onColumnsReorder,
      state: { sortBy: sortByField, sortDir, columnWidths, selectedRows, columnsOrder }
    } = this;

    const sortedData = sortBy(data, sortByField);

    return (
      <FlexView style={{ height: 300, width: '100%' }}>
        <Tablo
          data={sortDir === 'desc' ? sortedData.reverse() : sortedData}
          rowHeight={rowHeight}
          onSortChange={onSortChange}
          sortBy={sortByField}
          sortDir={sortDir}
          onColumnResize={onColumnResize}
          selectionType='single'
          selectedRows={selectedRows}
          onRowsSelect={onRowsSelect}
          columnsOrder={columnsOrder}
          onColumnsReorder={onColumnsReorder}
        >

          <TabloColumn name='avatar' fixed width={40} sortable={false} isResizable={false}>
            <Header></Header>
            <Cell>{avatar => <img src={avatar} height={40} width={40} />}</Cell>
          </TabloColumn>

          <TabloColumn name='name' fixed width={columnWidths.name}>
            <Header>Name</Header>
            <Cell>{name => <span style={{ fontWeight: 700 }}>{name}</span>}</Cell>
          </TabloColumn>

          <TabloColumn name='city' width={columnWidths.city}>
            <Header>City</Header>
          </TabloColumn>

          <TabloColumn name='email' width={columnWidths.email}>
            <Header>Email</Header>
            <Cell>{email => (
              <TextOverflow lazy label={email}>
                {self => (
                  <Tooltip popover={{ content: email, attachToBody: true}} style={{ width: '100%' }}>
                    {self}
                  </Tooltip>
                )}
              </TextOverflow>
            )}</Cell>
          </TabloColumn>

          <TabloColumn name='company' isResizable={false} flexGrow={1}>
            <Header>Company</Header>
          </TabloColumn>

        </Tablo>
      </FlexView>
    );
  }
}

const getRandomRow = () => {
  return {
    avatar: faker.image.avatar(),
    name: faker.name.findName(),
    city: faker.address.city(),
    email: faker.internet.email(),
    company: faker.company.companyName()
  };
};

const data = Array.apply(null, Array(30)).reduce(acc => [...acc, getRandomRow()], []);


@@ -920,16 +920,71 @@
  %3CTablo%0A
+          rowClassNameGetter=%7Bindex =%3E %60row-$%7Bindex%7D%60%7D%0A
         
@@ -2938,9 +2938,8 @@
 %5D, %5B%5D);%0A
-%0A

add in example