👔 Workbench

Workbench - A Table component designed for people who work

Install

npm install git+https://{CI-USER-TOKEN}:[email protected]/RealImage/workbench.git#{tag or commit-ish}

Note:

• Since this repo is private, installing this will require a GitHub PAT. Get the token created from the CI User's account and not from your own account
• The version number in the url (after the #) at the end can be any tag or commit-ish in the repo or can be skipped altogether as well.
• However, this isn't recommended since not pinning the dependency to a release tag on master, can possibly cause unnecessary and/or breaking changes. Please check here for the latest release tag.
• For upgrading, use the version number in package.json on master branch, and use that version as tag.
• Can install using yarn as well, nothing special about any particular package manager in this regard.

Available Scripts

In the project directory, you can run:

yarn build

Using Rollup Pkg we will build the output to the build folder.

The configurations can be found in root directory rollup.config.js

yarn start

The rollup will be running in watch mode and builds the changes when any changes are added

The configurations can be found in root directory rollup.config.js

yarn test

• This will run the unit test cases for the components and utility functions

yarn test:watch

• This will run the unit test cases for the components and utility functions in watch mode.
• The advantage using the script is, it will update the snapshots and run test cases for each changes.

yarn lint

• The linting script for the js and it uses the Eslint library

yarn format

• The script uses the prettier to format the code spaces and alignments.

yarn check_formatting

• The script validates code format and list the errors after the execution.

yarn stylelint

• The script is for the linting the styles and all the errors will ll=isted after the execution.

Usage

Basic Table Example. Most of the Table API is similar to react-table, refer to it for advanced Table usage.

Ensure you've also imported the base SASS file from the src/ folder. SASS file is imported instead of CSS since that would allow us to override the default SASS variables set for customisation. (Ensure your app build step processes SASS files). See the example folder for usage example.

import React, { Component } from "react";
import { Table, TablePagination } from "workbench";

class TableExample extends Component {
  render() {
    const data = [{
      name: 'Tanner Linsley',
      age: 26,
      friend: {
        name: 'Jason Maurer',
        age: 23,
      }
    },{
      ...
    }]

    const columns = [{
      Header: 'Name',
      accessor: 'name' // String-based value accessors!
    }, {
      Header: 'Age',
      accessor: 'age',
      Cell: props => <span className='number'>{props.value}</span> // Custom cell components!
    }, {
      id: 'friendName', // Required because our accessor is not a string
      Header: 'Friend Name',
      accessor: d => d.friend.name // Custom value accessors!
    }, {
      Header: props => <span>Friend Age</span>, // Custom header components!
      accessor: 'friend.age'
    }]

    return (
      <div>
        <Table data={data} columns={columns} />
        <TablePagination totalRecords={data.length} currentPage={1} />
      </div>
    )
  }
}

Props

Workbench Props

Table

{
    striped: PropTypes.bool,
    loading: PropTypes.bool,
    selectable: PropTypes.bool,
    manual: PropTypes.bool,
    data: PropTypes.array.isRequired,
    loadingMessage: PropTypes.object,
    emptyColumnsMessage: PropTypes.object,
    emptyDataMessage: PropTypes.object,
    LoadingComponent: PropTypes.node,
    EmptyColumnsComponent: PropTypes.node,
    EmptyDataComponent: PropTypes.node,
    columns: PropTypes.array.isRequired,
    style: PropTypes.object,
    className: PropTypes.string,
    selection: PropTypes.array,
    onSelect: PropTypes.func,
    keyField: PropTypes.string,
    expandedChildClassNames: PropTypes.string,
    selectedChildBackground: PropTypes.string,
    selectedChildClassNames: PropTypes.string,
    selectedBackground: PropTypes.string,
    selectedClassNames: PropTypes.string
}

Select Table

Note: Please ensure the id in your data is a string, Integer IDs won't work since those get modified internally in React Table to a string.

{
    striped: PropTypes.bool,
    loading: PropTypes.bool,
    data: PropTypes.array.isRequired,
    columns: PropTypes.array.isRequired,
    checkboxComponent: PropTypes.func,
    toggleSelection: PropTypes.func.isRequired,
    toggleAll: PropTypes.func.isRequired,
    selectAll: PropTypes.bool,
    indeterminate: PropTypes.bool,
    isSelected: PropTypes.func.isRequired,
    expandableIndeterminate: PropTypes.func,
    style: PropTypes.object,
    loadingMessage: PropTypes.object,
    emptyColumnsMessage: PropTypes.object,
    emptyDataMessage: PropTypes.object,
    LoadingComponent: PropTypes.node,
    EmptyColumnsComponent: PropTypes.node,
    EmptyDataComponent: PropTypes.node,
    selectedBackground: PropTypes.string,
    selectedChildBackground: PropTypes.string,
    selection: PropTypes.array,
    className: PropTypes.string
}

Expand Table

{
    keyField: PropTypes.string,
    className: PropTypes.string,
    striped: PropTypes.bool,
    childKeyField: PropTypes.string,
    columns: PropTypes.array,
    style: PropTypes.object,
    selectable: PropTypes.bool,
    showChildSelect: PropTypes.bool,
    selection: PropTypes.object,
    childIdentificationKey: PropTypes.string,
    data: PropTypes.array,
    expandChildComponent: PropTypes.func
}

React Table Props

{
  // General
  data: [],
  resolveData: data => resolvedData,
  loading: false,
  showPagination: true,
  showPaginationTop: false,
  showPaginationBottom: true
  showPageSizeOptions: true,
  pageSizeOptions: [5, 10, 20, 25, 50, 100],
  defaultPageSize: 20,
  minRows: undefined, // controls the minimum number of rows to display - default will be `pageSize`
  // NOTE: if you set minRows to 0 then you get rid of empty padding rows BUT your table formatting will also look strange when there are ZERO rows in the table
  showPageJump: true,
  collapseOnSortingChange: true,
  collapseOnPageChange: true,
  collapseOnDataChange: true,
  freezeWhenExpanded: false,
  sortable: true,
  multiSort: true,
  resizable: true,
  filterable: false,
  defaultSortDesc: false,
  manual: true // handles sort manually by using `defaultSortMethod` method
  // NOTE: if the sort has to be done from the server side we need to make it false so that it should be handled in `onSortedChange` method
  defaultSorted: [],
  defaultFiltered: [],
  defaultResized: [],
  defaultExpanded: {},
  defaultFilterMethod: (filter, row, column) => {
    const id = filter.pivotId || filter.id
    return row[id] !== undefined ? String(row[id]).startsWith(filter.value) : true
  },
  defaultSortMethod: (a, b, desc) => {
    // force null and undefined to the bottom
    a = a === null || a === undefined ? '' : a
    b = b === null || b === undefined ? '' : b
    // force any string values to lowercase
    a = typeof a === 'string' ? a.toLowerCase() : a
    b = typeof b === 'string' ? b.toLowerCase() : b
    // Return either 1 or -1 to indicate a sort priority
    if (a > b) {
      return 1
    }
    if (a < b) {
      return -1
    }
    // returning 0, undefined or any falsey value will use subsequent sorts or
    // the index as a tiebreaker
    return 0
  },
  PadRowComponent: () => <span>&nbsp;</span>, // the content rendered inside of a padding row

  // Controlled State Overrides (see Fully Controlled Component section)
  page: undefined,
  pageSize: undefined,
  sorted: [],
  filtered: [],
  resized: [],
  expanded: {},

  // Controlled State Callbacks
  onPageChange: undefined,
  onPageSizeChange: undefined,
  onSortedChange: undefined,
  onFilteredChange: undefined,
  onResizedChange: undefined,
  onExpandedChange: undefined,

  // Pivoting
  pivotBy: undefined,

  // Key Constants
  pivotValKey: '_pivotVal',
  pivotIDKey: '_pivotID',
  subRowsKey: '_subRows',
  aggregatedKey: '_aggregated',
  nestingLevelKey: '_nestingLevel',
  originalKey: '_original',
  indexKey: '_index',
  groupedByPivotKey: '_groupedByPivot',

  // Server-side callbacks
  onFetchData: () => null,

  // Classes
  className: '',
  style: {},

  // Component decorators
  getProps: () => ({}),
  getTableProps: () => ({}),
  getTheadGroupProps: () => ({}),
  getTheadGroupTrProps: () => ({}),
  getTheadGroupThProps: () => ({}),
  getTheadProps: () => ({}),
  getTheadTrProps: () => ({}),
  getTheadThProps: () => ({}),
  getTheadFilterProps: () => ({}),
  getTheadFilterTrProps: () => ({}),
  getTheadFilterThProps: () => ({}),
  getTbodyProps: () => ({}),
  getTrGroupProps: () => ({}),
  getTrProps: () => ({}),
  getTdProps: () => ({}),
  getTfootProps: () => ({}),
  getTfootTrProps: () => ({}),
  getTfootTdProps: () => ({}),
  getPaginationProps: () => ({}),
  getLoadingProps: () => ({}),
  getNoDataProps: () => ({}),
  getResizerProps: () => ({}),

  // Custom pagination rendering
  renderPageJump: ({ onChange, value, onBlur, onKeyPress, inputType, pageJumpText }) => component,
  renderCurrentPage: page => component,
  renderTotalPagesCount: pages => component,
  renderPageSizeOptions: ({
      pageSize,
      pageSizeOptions,
      rowsSelectorText,
      onPageSizeChange,
      rowsText,
    }) => component

  // Global Column Defaults
  // To override only some values, import { ReactTableDefaults } from 'react-table'
  // and construct your overrides (e.g. {...ReactTableDefaults.column, className: 'react-table-cell'})
  column: {
    // Renderers
    Cell: undefined,
    Header: undefined,
    Footer: undefined,
    Aggregated: undefined,
    Pivot: undefined,
    PivotValue: undefined,
    Expander: undefined,
    Filter: undefined,
    // Standard options
    sortable: undefined, // use table default
    resizable: undefined, // use table default
    filterable: undefined, // use table default
    show: true,
    minWidth: 100,
    // Cells only
    className: '',
    style: {},
    getProps: () => ({}),
    // Headers only
    headerClassName: '',
    headerStyle: {},
    getHeaderProps: () => ({})
    // Footers only
    footerClassName: '',
    footerStyle: {},
    getFooterProps: () => ({}),
    filterAll: false,
    filterMethod: undefined,
    sortMethod: undefined,
    defaultSortDesc: undefined,
  },

  // Global Expander Column Defaults
  // To override only some values, import { ReactTableDefaults } from 'react-table'
  // and construct your overrides (e.g. {...ReactTableDefaults.expanderDefaults, sortable: true})
  expanderDefaults: {
    sortable: false,
    resizable: false,
    filterable: false,
    width: 35
  },

  // Global Pivot Column Defaults
  pivotDefaults: {},

  // Text
  previousText: 'Previous',
  nextText: 'Next',
  loadingText: 'Loading...',
  noDataText: 'No rows found',
  pageText: 'Page',
  ofText: 'of',
  rowsText: 'rows',

  // Accessibility Labels
  pageJumpText: 'jump to page',
  rowsSelectorText: 'rows per page',
}