wix-style-react/src/Table/DataTable/docs/Example.js

wix-style-react

import React from 'react';
import DataTable from '..';
import { classes } from './Example.st.css';

const style = {
  width: '966px',
};

const baseData = [
  { firstName: 'Meghan', lastName: 'Bishop' },
  { firstName: 'Sara', lastName: 'Porter' },
  { firstName: 'Deborah', lastName: 'Rhodes' },
  { firstName: 'Walter', lastName: 'Jenning' },
];

const generateData = () => {
  let data = [];
  for (let i = 0; i < 10; i++) {
    data = data.concat(baseData);
  }
  return data;
};

class DataTableExample extends React.Component {
  render() {
    return (
      <div style={style}>
        <DataTable
          dataHook="story-data-table-example"
          data={generateData()}
          onRowClick={(row, rowNum) => {
            /* eslint-disable no-alert*/
            window.alert(
              `You clicked "${row.firstName} ${row.lastName}", row number ${
                rowNum + 1
              }`,
            );
            /* eslint-enable no-alert*/
          }}
          dynamicRowClass={row =>
            row.firstName === baseData[1].firstName
              ? classes.highlightRow
              : null
          }
          infiniteScroll
          itemsPerPage={20}
          columns={[
            {
              title: 'Row Number',
              render: (row, rowNum) => '#' + (rowNum + 1),
              width: '20%',
              important: true,
            },
            {
              title: 'First Name',
              render: row => <span>{row.firstName}</span>,
              width: '40%',
            },
            {
              title: 'Last Name',
              render: row => <span>{row.lastName}</span>,
              width: '40%',
            },
          ]}
        />
      </div>
    );
  }
}

export default DataTableExample;