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

wix-style-react

import React from 'react';
import DataTable from '..';
import PropTypes from 'prop-types';

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 < 2; i++) {
    data = data.concat(baseData);
  }
  return data;
};

const MyRowDetailsComponent = props => {
  return (
    <div style={{ padding: '9px' }}>
      <h2>User Details</h2>
      <p>First name: {props.firstName}</p>
      <p>Last name: {props.lastName}</p>
    </div>
  );
};

MyRowDetailsComponent.propTypes = {
  firstName: PropTypes.string.isRequired,
  lastName: PropTypes.string.isRequired,
};

class ExampleWithAnimatedRowDetails extends React.Component {
  render() {
    return (
      <div style={style}>
        <DataTable
          dataHook="story-data-table"
          data={generateData()}
          rowDetails={row => <MyRowDetailsComponent {...row} />}
          rowDetailsAnimation
          allowMultiDetailsExpansion
          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 ExampleWithAnimatedRowDetails;