Table

A table component with checkboxes, sticky head, sticky right panel, and horizontal scroll widget.

Example

Change Log

16.5.3

• Fix date formatting bugs where en-US locales were set to international date format

16.5.2

• Upgrade @procore/labs-date-formatter to v0.2.1

16.5.1

• Verified this.header and this.sidebarContainers refs are not null before accessing their values.

16.5.0

• Added a check for de-DE locale so that it uses dots instead of slashes inside <InlineDateSelect />.

16.4.0

• Added an onChange callback to <InlineText />.

16.3.0

• Added data-qa tags for automation testing

16.2.0 BREAKING CHANGE

• Returning entire event in lieu of event.target from onClickRow inside of BodyRow and traced up to Table.

16.1.6

• Fixed column sort unintentionally being called when ending column resizing.

16.1.5

• Fixed InlineDateSelect incorrectly setting February label to March when today's date is greater than the 28th.

16.1.4

• Fixed InlineDateSelect incorectly/accidently setting defaultProps causing date duplication visual bug

16.1.3

• Fixed InlineDateSelect calendar's dayNames generation algorithm

16.1.2

• Added date-format support consistent with date-formatter package for supported locales.

16.1.1

• Fixed a couple of bugs associated with InlineDateSelect.
  • The locale mapping for locales such as th,fr and is was wrong.
  • dayNames had a problem pertinent to timezones.
  • Localization of InlineDateSelect is now tied to @procore/labs-date-formatter and not date-fns.

16.1.0

• Added optional locale prop to InlineDateSelect. Passing the locale (e.g. locale="es") in that prop will translate the calendar dropdown months / days.

16.0.0

• Allows Table's HeadCell component to consume a title column definition property that will allow you to specify a text value seperate from the label property.

15.4.2

• Fixed bug in which groupRowHeaderFont div would grow and block other elements in Firefox

15.4.1

• Remove Math.random from HeaderCell keys

15.4.0

• Adds optional onCheckAll prop to <TableWithStatefulCheckboxes> that returns isCheckedAll true or false.

15.3.7

• no changes, just ironing out a versioning bug

15.3.6

• Fixed an issue where TableConfig was referencing the defaults instead of the current properties of a column

15.3.5

• Fixed an issue where column headers do not align with body rows

15.3.4

• Fixed an issue where ghost row renders when using configurable columns drag and drop when enableDraggableRows is false.

15.3.3

• Fixes bug in DefaultCell where default props for children was 'Hello'

15.3.2

• Fixed autoResizable not working

15.3.1

• Fixed an edge case where the row was not aligning when not showing groups

15.3.0

• Made several indices available to table cells as props (rowIndex, groupIndex and aggregateIndex), to allow for e.g. finer analytics tracking

15.2.2

• Fixed an edge case where the carat was not aligning when showing groups, but not drag handles

15.2.1

• Fixed an edge case where the row was not aligning when showing groups, but not checkboxes

15.2.0

• Added functionality to DefaultCell to be able to arbitrary element attributes. Mainly used for passing data-qa-tag

15.1.0

• Added functionality for indeterminate group header checkboxes via indeterminateGroups prop

15.0.1

• Fix for columns still having flex properties when removed from the head cells

15.0.0

• [BREAKING] New cell component DefaultCell for basic (non-inline editable) cells.
• [BREAKING] clearable prop to InlineSelect has been removed
• [BREAKING] InlineText and InlineTextArea no longer select value on focus by default use prop autofocus for previous functionality
• The DefaultCell takes the same props as the div previously
• Passing row element to onRowClick function
• Core styles were applied to table
• To adapt existing tables, change any cells that are rendered as divs to DefaultCells
• InlineTextArea now allows row height to grow and text to wrap by default. Use prop singleRow to keep consistent row height
• InlineTextArea now has prop maxHeight to restrict height of textArea (ex: while in scroll container)
• InlineTextArea supports pressing Shift + enter to add a newline instead of closing it.
• stickyContentControls z-index changed from $stickyContentControlsZ: z-level(content, sticky) + 5 (405) to $stickyContentControlsZ: z-level(content, popovers); (600) (see Core z-index palette here)

14.2.0

• Fixed issue where sticky content controls stacked behind sidebar
• Fixed some drag and drop issues where ghost row would persist
• Rows can now only be dragged by drag handle, instead of anywhere in the row

14.1.3

• Bugfix for Firefox and input type of number. Now focuses correctly

14.1.2

• Adds BasicTable example
• returns false in renderBodyRows to render only header row instead of '0' when data is empty

14.1.1

• Fixed InlineTextArea styling

14.1.0

• Added InlineTextArea component

14.0.0

• [BREAKING] Implemented new z-index palette to solve layering issues with InlineSelect, CalendarPicker, and the sidebar
• This change can cause rendering issues with the Select popovers from the Filters component
• No breaking API changes

13.4.2

• Fixed ellipsis InlineText overflow issue on Firefox

13.4.1

• Fix lookup on undefined for ungrouped data

13.4.0

• Enable grouped / non-grouped data to appear in the same table
• Fix checkbox vertical alignment by 1px

13.3.0

• <InlineText> now accepts a type prop which defaults to text as per previous behavior

13.2.1

• <InlineText> now uses a lighter font color #b3b3b3 when placeholder text is shown.

13.2.0

• Added stickyContentControls to enable passing in a component that vertically scrolls with the table header

13.1.2

• Revert back to BodyRow function, as component broke in some clients

13.1.1

• BodyRow now called as component instead of function
• Fixed issue with cells growing if content was very large
• onResize no longer called in setState callback

13.1.0

• Added maxLengh property to .

13.0.4

• Change autofocus to ref for InlineTextInput

13.0.3

• Added return and preventDefault if dragging is disabled in onDragStart to prevent unintentional dragging.

13.0.2

• Added missing prop enableDraggableRows to <BodyRow>

13.0.1

• Standardized InlineDateSelect props validator to handle date changes better

13.0.0

• Instead of re-issuing onSelect, will now fire onBlur for InlineDateSelect
• InlineSelect now defaults closeOnSelect to false

12.6.2

• Fixed bug where you had to click twice to edit if the first click is on the pencil. (Firefox and Safari)

12.6.1

• Fixed bug where InlineSelect was allowing disabled items to be selected
• Fixed bug where InlineDateSelect was calling the onSelect cb prop twice

12.6.0

• InlineSelect's onSelect prop now returns entire object (not just key and value)
• Bold font-weight styling for items with children

12.5.0

• Fixed blur issue. They grey border goes away when the calendar does.

12.5.0

• Rows can be dragged and dropped as the bottom row
• Drag and drop style updates

12.4.1

• Fixed a bug where the inline select would not close on blur for React 15 clients

12.4.0

• Add lockedRowsPerGroup prop

12.3.4

• Added more obvious affordance for column resizing
• Added grab/grabbing cursors for row reordering

12.3.3

• Minor border style update

12.3.2

• Only display horizontal scroller when necessary

12.3.1

• Enable auto resized columns to return to their original size when table width is reduced

12.3.0

• Added support for keyboard navigation (up, down, enter, esc) to TableConfig

12.2.1

• Fixed bug on Firefox and Safari where clicking the inlinePencil icon would not expand InlineSelect or InlineDateSelect

12.2.0

• Added an onSearch prop to InlineSelect
• Fixed bug where clicking in the cell would not close InlineSelect

12.1.0

• Added closeOnSelect prop to InlineSelect
• Fixed scrolling and key listener bugs on InlineSelect

12.0.2

• Checkbox rendering fix for Firefox

12.0.1

• Fixed missing ref for context menu
• Updated select all, selected groups on checked rows props receive

12.0.0

• Breaking "General to specific" naming convention updates for onGroupCheck (now onCheckGroup), onRowCheck -> onCheckRow, onAllCheck -> onCheckAll
• Breaking "General to specific" naming convention update for onRowClick (now onClickRow)
• Possible Breaking Table config z-index fix 3 -> 8
• Added renderContextMenu on body rows
• .tableContainer overflow scroll -> auto

11.2.12

• Fixed issues in InlineDateSelect where changing date by typing in input fields did not trigger onSelect callback on blur

11.2.11

• Fixed IE error on row hover
• InlineDateSelect now closes on blur and month changer arrows keep select open in IE
• Added polyfills to dev mode

11.2.10

• Checkbox UX update for TableConfig

11.2.9

• Applying IE fix to sidebar header cell.

11.2.8

• Using .top instead of .y for sticky header to support IE

11.2.7

• Fixes bug where empty string is not valid submit value
• Removes now unused support for previousValue

11.2.6

• Checkbox UX update

11.2.5

• Fix timing issue with onResize by waiting for window.onload
• Fix window resize event listener pointing to an undefined function

11.2.4

• Fixed InlineDateSelect onClear not firing

11.2.3

• InlineDateSelect should not "submit" on clearing. Changed the button to explicitly be of type="button"

11.2.2

• Restoring missing param in ReactRange
• Adding props update listener in TableWithStatefulCheckboxes

11.2.1

• Using internal ReactRange to avoid propType error

11.2.0

• Added error prop and styling to InlineText, InlineDateSelect, and InlineSelect

11.1.0

• Added HorizontalScroller as an export

11.0.0

• Added orange edit hover styles for inline editable components
• Breaking InlineText is no longer clearable, removed props canClear and onClear
• Breaking canClear -> clearable for InlineSelect and now defaults to false
• Breaking unclearable -> clearable for InlineDateSelect and now defaults to false
• Breaking Updated i18n props with psudolocalization defaults for InlineDateSelect, InlineText, and InlineSelect
• Breaking stickyHeader now defaults to false for Table

10.6.1

• Unchecking empty groups by default

10.6.0

• Drag and drop for table rows. Makes no assumptions about dragging between groups, simply provides indexes. Known bug: not able to drop as last row

10.5.2

• Removing onMounted (external checkbox management eliminates need)

10.5.1

• TableWithStatefulCheckboxes check for grouping, idKey
• TableWithStatefulCheckboxes pass in checkedRows
• TableWithStatefulCheckboxes refactor, updates to all check, group check logic

10.5.0

• Added controlled prop to InlineSelect
• Allows client to pass what value the select should render rather than depending on selects internal state

10.4.2

• Removed setState callback from InlineSelect

10.4.1

• Tighter scoping on sidebar sizing to accomodate multiple instances
• Fixing hover console error

10.4.0

• Exporting TableWithStatefulCheckboxes decorator

10.3.1

• Full row width bug fixed, sizing perf updates

10.3.0

• Added row hovering and .groupRowHover and .bodyRowHover classes

10.2.2

• Fixed a bug where the inline select would always select the first item in the dropdown regardless of search

10.2.1

• Fixed a selection issue on disabled options

10.2.0

• unclearable prop for InlineDateSelect added (false by default)

10.1.0

• InlineSelect now respects disabled property, which is optionally passed in as part of the data data: [{ key: <key>, value: <value>, disabled: <boolean> }, ...]

10.0.7

• Fixed bug where users could not select table text
• Fixed bug where keyboard navigation did not work on InlineSelect when searchable is false

10.0.6

• Fixed a bug where stickyHeader option was not working for table.

10.0.5

• Removed setState callbacks from InlineDateSelect
• Fixed bug where two right borders appeared when hiding sidebar
• Fixed bug where resizing inline date select columns broke rendering

10.0.4

• Fixed a bug where the event listener for onScroll was not removed on component unmount.

10.0.3

• Fixed a bug where order of mouse events was sometimes causing inline selects to not work correctly on first select

10.0.2

• Fixed bug where selecting date in December cleared select

10.0.1

• Fixed bug where calendar picker month was out of sync with selected value

10.0.0

• Breaking Updated to React 16.x.x
• InlineSelect and InlineDateSelect now use react portals for better popout positioning
• Date picker now opens to initial value if passed in via prop and highlights date
• Fixed bug where clicking inline date title didn't open picker
• Added better test data for dates

9.4.3

• Adding missing sidebar check on sticky header calculations

9.4.2

• Fix passing the rowData on a onRowClick.

9.4.1

• Fixing sticky header positioning bug
• Unsticking header after table has scrolled out of view

9.4.0

• onRowClick prop added. Allows an onClick functionality when clicking the whole row.

9.2.2

• stickyHeader prop added

9.2.1

• Gracefully failing if no default provided in column def

9.2.0

• Added analytics event for column resizing

9.1.0

• onBlur prop added

9.0.0

• Breaking Check boxes are no longer being controlled by the Table component's internal state.
• New props added: 'checkedRows', 'checkedGroups', and 'checkedAll' which are used to set the state of the checkboxes.
• New props added: 'onRowCheck', 'onGroupCheck', and 'onAllCheck' which are used as callbacks for when the user checks a box.
• New prop added: 'disabledGroups' which prevents users from selecting that group or the child rows.
• Bug Fix: fixed the moveHeader method from firing in case the table ever goes hidden.
• Bug Fix: fixed z-index stacking for GroupSidebarCells. This was causing issues when a dropdown list was added to a GroupSidebarCell if the next subsequent GroupSidebarCell was contained in the box of the dropdown, it would display behind the GroupSidebarCell because of the stacking order.
• Bug Fix: made a change to InlineTextEdit which will submit on blur regardless if the value had changed.

8.1.1

• Add unit tests, CSS module mocking, and code coverage reporting.

8.1.0

• onChange prop added

8.0.0

• TableConfig is now exported by Table
• tableData prop is now data
• resizable has been renamed to userResizable and has been removed from session storage
• default object available in column definitions and defaultWidth was removed

7.6.2

• Added composeStyles in componentWillReceiveProps in InlineSelect, InlineText, and InlineDateSelect

7.6.1

• Added check for stylesheet length before recomposing styles in InlineSelect, InlineText, and InlineDateSelect

7.6.0

• Invoke composeStyles when different styles are passed down through props to the inline table elements

7.5.3

• Fix issue with updates to columnDefinitions such as reset to default and column reordering

7.5.2

• Using memoized dimensions during group sizing operations to avoid reflow violations

7.5.1

• Fix for issue with autoResizable not being set to true by default

7.5.0

• Ability to disable column auto resize by setting autoResizable to false

7.4.6

• Tweaked Z-Index values for sidebar cells

7.4.5

• Move sorting arrow icon next to HeadCell label to prevent far right icon alignment bug introduced in 6.1.0

7.4.4

• Enabling CSS Modules to be mocked for tests with identity-obj-proxy.

7.4.3

• Style scoping fix

7.4.2

• Added protection against null refs

7.4.1

• IE patches for fixed header

7.4.0

• Added yy and yyyy support in <InlineDateSelect />

7.3.2

• Added support for tableData to be an empty array

7.3.1

• Refactor column resizing to support column reordering

7.3.0

• In <InlineText /> if canClear is false and you attempt to submit an empty string, it will default to the previous value.

7.2.0

• Add Jest Unit tests and test npm script.
• Only invoke composeStyles when necessary in InlineText.

7.1.0

• Analytics added
• Exposed sort enum in sand box

7.0.0

• Removing renderEmpty() support
• Fixing layout reflow issue in header position logic

6.1.3

• Fixed bug where the column resizing guide line made table scrollable

6.1.2

• Simplifying InlineSelect and InlineDateSelect positioning methods

6.1.1

• Adding padding-right to .contentContainer when showSidebar is true

6.1.0

• Columns can be resized by an end-user

6.0.0

• Added showSidebar prop to <Table />, sidebar is now not shown by default

5.1.9

• Perf: fixing layout thrashing in head row sizing

5.1.8

• Use getBoundingClientRect().height method to properly align sidebar rows with table rows when the user zooms in and out

5.1.7

• Removing event listeners on unmount

5.1.6

• Added componentWillReceiveProps to <InlineDateSelect />, <InlineText />, and <InlineSelect />.

5.1.5

• Removing resize listener on group row, fixes console error

5.1.4

• Empty groups no longer appear selected and expanded

5.1.3

• InlineSelect and InlineDateSelect click event conflict fixed.

5.1.2

• InlineSelect only scroll when necessary

5.1.1

• Fixed table head padding on IE

5.1.0

• Removed isRequired from onClear()
• Added onOpen() prop

5.0.0

• Cleanup of editable cell classNames

4.4.0

• Adding expandAll event handling

4.3.0

• Keyboard navigation for <InlineSelect />

4.2.3

• Custom table cell widths

4.2.2

• Fixed a width style bug in <InlineDateSelect />

4.2.1

• Styled inline date select

4.2.0

• <InlineSelect /> new prop searchable

4.1.2

• <InlineText /> and inline selects styled

4.1.1

• Inline selects fixed on IE11

4.1.0

• <InlineText> component added

4.0.1

• Expand was commented out, restoring

4.0.0

• <OverflowCell> component removed
• <InlineSelect> component added
• <InlineDateSelect> component added
• Support for custom value formats

3.0.6

• Fixed "uncontrolled to controlled inputs" warning, removed CheckboxCell.jsx file

3.0.5

• Fixed vertical alignment bug of header and body
• Fixed content container padding that was hiding part of last column

3.0.4

• Fixed bug where background of group rows wasn't rendering when horizontally scrolling

3.0.3

• Fixed expand/collapse all caret bug that wasn't quite fixed in 3.0.1

3.0.2

• z-index updates to make header above body
• Removing default styles

3.0.1

• Sandbox cleanup
• Expand/collapse all (on constructor and willReceiveProps) bug fix

3.0.0

• Fixing multiple calls to onCheck handler
• Returning map of checked results rather than array

2.5.6

• Fixed group collapse all bug
• Fixed group check all bug
• Restored star selector for box sizing

2.5.5

• The fix in v2.5.3 ended up being a hack, this fixes it for real

2.5.4

• Removed the star selector from styling

2.5.3

• Fixed IE 11 row height bug introduced in 2.5.0

2.5.2

• Added margin-left to the sort arrow

2.5.1

• Very minor padding fix

2.5.0

• Row height is passed in as a prop so that it can be controlled by other components

2.4.3

• Took out the shouldComponentUpdate

2.4.2

• Fixed a race condition when checking and unchecking all

2.4.1

• Fixed a bug where the select all checkbox would incorrectly be checked when not all elements were actually selected

2.4.0

• Added support for row height control

2.3.1

• Update default styles

2.3.0

• Adding in a listener to clear all checkboxes on a listener
• upgraded to webpack 3

2.2.7

• Don't show sidebar cells when groups are collapsed

2.2.6

• Fix bug that was causing the header to lose stickiness on update

2.2.5

• Added in safe checks to avoid null references

2.2.4

• Fix resize bug that cause sidebar head to lose stickiness

2.2.3

• Updating package.json to Particles URL

2.2.2

• Fixed overflow issue (child elements of the table can now overflow the table)

2.2.1

• Fixed sticky header scroll bug
• Changed some border styling to fix overflow cell border rendering bugs

2.2.0

• Added in support for more table listeners, ability to figure out the internal state of checkedIds

2.1.2

• Adjusted naming convention for ongroupselect from key to name

2.1.1

• Patch groupBy

2.1.0

• Adding more exposed subscribable methods for table management -- checkAll, checkOne, resize, scroll standardized and namespaced to 'table'

2.0.0

• Throttle slider actions to improve performance
• Move checkbox persistence to session storage to avoid local storage overflow bugs
• Expand all / collapse all groups now managed internally
• Remove shouldcomponentupdate for row to fix line repainting issues
• Remove lodash to lighten component footprint
• Remove immutable to lighten component footprint
• Fixed Cannot read property 'getBoundingClientRect' of undefined console error
• requestAnimationFrame used to optimize DOM changes
• Stylesheet composition implemented
• Overflow bug on inline edit dropdown
• Improved documentation (sandbox examples)
• Package size decreased from 925kb to 135kb (pre-compression)
• Removed URL updating

1.2.3

• Added back missing variables and passing down of globalKey correctly

1.2.2

• Removing reset.scss

1.2.1

• Configure sorting features through props

<Table
  sorting: {
    direction: (columnDefinition) => 'desc' | 'asc' | false,
    change: (columDefinition) => return void
  }
/>

1.0.8, 1.0.9

• Implemented prod builds

1.0.7

• renderEmpty() method added for empty state

1.0.6

• Implemented Webpack 2.2.1

1.0.5

• Minor Webpack optimizations

1.0.4

• Experimental; no significant changes

1.0.3

• Return to page 1 on sort

1.0.2

• Caret styles consolidated
• Removed ripanga- prefix on styles

1.0.1

• Debugging URL construction

1.0.0

• Initial commit