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
andthis.sidebarContainers
refs are notnull
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 ofevent.target
fromonClickRow
inside ofBodyRow
and traced up toTable
.
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
andis
was wrong. - dayNames had a problem pertinent to timezones.
- Localization of InlineDateSelect is now tied to
@procore/labs-date-formatter
and not date-fns.
- The locale mapping for locales such as
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 thelabel
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 returnsisCheckedAll
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
andaggregateIndex
), 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 toInlineSelect
has been removed - [BREAKING]
InlineText
andInlineTextArea
no longer select value on focus by default use propautofocus
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
div
s toDefaultCell
s -
InlineTextArea
now allows row height to grow and text to wrap by default. Use propsingleRow
to keep consistent row height -
InlineTextArea
now has propmaxHeight
to restrict height of textArea (ex: while in scroll container) -
InlineTextArea
supports pressingShift + 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 atype
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 fireonBlur
for InlineDateSelect - InlineSelect now defaults
closeOnSelect
tofalse
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 theonSelect
cb prop twice
12.6.0
-
InlineSelect
'sonSelect
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
orInlineDateSelect
12.2.0
- Added an
onSearch
prop toInlineSelect
- Fixed bug where clicking in the cell would not close
InlineSelect
12.1.0
- Added
closeOnSelect
prop toInlineSelect
- 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 toInlineText
,InlineDateSelect
, andInlineSelect
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 propscanClear
andonClear
-
Breaking
canClear
->clearable
forInlineSelect
and now defaults tofalse
-
Breaking
unclearable
->clearable
forInlineDateSelect
and now defaults tofalse
-
Breaking Updated i18n props with psudolocalization defaults for
InlineDateSelect
,InlineText
, andInlineSelect
-
Breaking
stickyHeader
now defaults tofalse
forTable
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 toInlineSelect
- 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 forInlineDateSelect
added (false by default)
10.1.0
-
InlineSelect
now respectsdisabled
property, which is optionally passed in as part of the datadata: [{ 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
whensearchable
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
andInlineDateSelect
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 byTable
-
tableData
prop is nowdata
-
resizable
has been renamed touserResizable
and has been removed from session storage -
default
object available in column definitions anddefaultWidth
was removed
7.6.2
- Added composeStyles in componentWillReceiveProps in
InlineSelect
,InlineText
, andInlineDateSelect
7.6.1
- Added check for stylesheet length before recomposing styles in
InlineSelect
,InlineText
, andInlineDateSelect
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
andyyyy
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
andInlineDateSelect
positioning methods
6.1.1
- Adding padding-right to
.contentContainer
whenshowSidebar
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
fromonClear()
- 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 propsearchable
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
andwillReceiveProps
) 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
toname
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