wix-style-react/dist/es/stories/Table/Table.story.js

wix-style-react

import React from 'react';
import s from './Table.story.scss';
import { storySettings } from './storySettings';
import CodeExample from 'wix-storybook-utils/CodeExample';

import { Table } from '../../src/Table/Table';

import { TableExample } from './TableExample';
import TableExampleRaw from '!raw-loader!./TableExample';

import { TablePageExample } from './TablePageExample';
import TablePageExampleRaw from '!raw-loader!./TablePageExample';

import { TableInfiniteScrollExample } from './TableInfiniteScrollExample';
import TableInfiniteScrollExampleRaw from '!raw-loader!./TableInfiniteScrollExample';

import { ActionCellPrimaryExample } from './ActionCellPrimaryExample';
import ActionCellPrimaryExampleRaw from '!raw-loader!./ActionCellPrimaryExample';

import { ActionCellPrimarySecondaryExample } from './ActionCellPrimarySecondaryExample';
import ActionCellPrimarySecondaryExampleRaw from '!raw-loader!./ActionCellPrimarySecondaryExample';

import { TableEmptyStateExample } from './TableEmptyStateExample';
import TableEmptyStateExampleRaw from '!raw-loader!./TableEmptyStateExample';

import { TableColumnAlignmentExample } from './TableColumnAlignmentExample';
import TableColumnAlignmentExampleRaw from '!raw-loader!./TableColumnAlignmentExample';

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

var dataLong = [1, 2, 3, 4, 5].reduce(function (accum) {
  return accum.concat(data);
}, []);

var columnsOption1 = [{ title: 'First', width: '30%', render: function render(row) {
    return row.firstName;
  } }, { title: 'Last', width: '30%', render: function render(row) {
    return row.lastName;
  } }];

var columnsOption2 = [{ title: 'Row Num', render: function render(row, rowNum) {
    return rowNum;
  } }, { title: 'First', render: function render(row) {
    return row.firstName;
  } }, { title: 'Last', render: function render(row) {
    return row.lastName;
  } }, { title: 'Full', render: function render(row) {
    return row.firstName + row.lastName;
  } }];

export default {
  category: storySettings.kind,
  storyName: storySettings.storyName,

  component: Table,
  componentPath: '../../src/Table/Table.js',

  componentProps: {
    dataHook: storySettings.dataHook,
    id: 'id',
    data: data,
    columns: columnsOption1,
    showSelection: true
  },
  exampleProps: {
    columns: [{ label: '2 columns example', value: columnsOption1 }, { label: '4 columns example', value: columnsOption2 }],
    data: [{ label: '4 rows', value: data }, { label: '40 rows', value: dataLong }]
  },
  codeExample: false,
  examples: React.createElement(
    'div',
    null,
    React.createElement(
      'div',
      { className: s.examples },
      React.createElement(
        'div',
        { className: s.example },
        React.createElement(
          CodeExample,
          { title: 'Typical (With Toolbar)', code: TableExampleRaw },
          React.createElement(TableExample, null)
        )
      ),
      React.createElement(
        'div',
        { className: s.example },
        React.createElement(
          CodeExample,
          {
            title: 'Table in a Page (Fixed Header)',
            code: TablePageExampleRaw
          },
          React.createElement(TablePageExample, null)
        )
      ),
      React.createElement(
        'div',
        { className: s.example },
        React.createElement(
          CodeExample,
          {
            title: 'Table in a Page (Infinite Scroll)',
            code: TableInfiniteScrollExampleRaw
          },
          React.createElement(TableInfiniteScrollExample, null)
        )
      ),
      React.createElement(
        'div',
        { className: s.example },
        React.createElement(
          CodeExample,
          {
            title: 'Table with Action Cell (Primary Action Only)',
            code: ActionCellPrimaryExampleRaw
          },
          React.createElement(ActionCellPrimaryExample, null)
        )
      ),
      React.createElement(
        'div',
        { className: s.example },
        React.createElement(
          CodeExample,
          {
            title: 'Table with Action Cell (Primary and Secondary Actions)',
            code: ActionCellPrimarySecondaryExampleRaw
          },
          React.createElement(ActionCellPrimarySecondaryExample, null)
        )
      ),
      React.createElement(
        'div',
        { className: s.example },
        React.createElement(
          CodeExample,
          {
            title: 'Table with EmptyState',
            code: TableEmptyStateExampleRaw
          },
          React.createElement(TableEmptyStateExample, null)
        )
      ),
      React.createElement(
        'div',
        { className: s.example },
        React.createElement(
          CodeExample,
          {
            title: 'Table with column alignments',
            code: TableColumnAlignmentExampleRaw
          },
          React.createElement(TableColumnAlignmentExample, null)
        )
      )
    )
  )
};