A dynamic table displays rows of data with built-in pagination, sorting, and re-ordering functionality.
yarn add @atlaskit/dynamic-table#117363
10a0f7f6c2027 -
This package's peerDependencies have been adjusted for react and/or react-dom to reflect the
status of only supporting React 18 going forward. No explicit breaking change to React support has
been made in this release, but this is to signify going forward, breaking changes for React 16 or
React 17 may come via non-major semver releases.
Please refer this community post for more details: https://community.developer.atlassian.com/t/rfc-78-dropping-support-for-react-16-and-rendering-in-a-react-18-concurrent-root-in-jira-and-confluence/87026
01b28858edafb -
Changed the aria-label for previous page and next page buttons4660ec858a305 -
Update React from v16 to v1897099e70a5731 -
Update dependencies and remove unused internal exports.bc47a0d12cb7a -
[ux] Updates visually refreshed sort button in DynamicTableStateless for an icon only column
header3c97c348c655c -
Migrated from @emotion/react to @compiled/react in order to improve performance, align with
the rest of the Atlaskit techstack, and support React 18 Streaming SSR. Please note, in order to
use this version of @atlaskit/dynamic-table, you will need to ensure that your bundler is
configured to handle .css imports correctly. Most bundlers come with built-in support for .css
imports, so you may not need to do anything. If you are using a different bundler, please refer to
the documentation for that bundler to understand how to handle .css imports. For more
information on the migration, please refer to
RFC-73 Migrating our components to Compiled CSS-in-JS.3c97c348c655c -
[ux] Visually refreshed sort button icon and styles for DynamicTableStatelessd3922e72aa0e6 -
[ux] Rankable table rows no longer have role="button" appliedd0ba9d90d42e5 -
Adds side-effect config to support Compiled css extraction in third-party appsd212954f3fb10 -
Updated header styles introduced in v15.1.0 are now default and no longer behind a feature flag.b813bd74ede6d -
Migrates usage of react-beautiful-dnd to pragmatic-dnd using the interop-layer from PDND. There
are no breaking changes however there may be minor behavioural and visual chagnes as a result
since the experiences are fundamentally different.45d766152e3a9 -
Updated header styles introduced in v15.1.0 are now default and no longer behind a feature flag.6467f4a7a7a99 -
Updated header styles to align to new modernised typography styles. Header styles are now slightly
darker. This change is behind a feature flag.2f4fd6db3e451 -
Adds @types/react-beautiful-dnd which was previously missing5fee01201ba15 -
Removes usage of legacy analytics-next APIs internally in favor of the new APIs which do not
depend on legacy react context. This should not require any changes to consumers of the package,
however behaviors of the new APIs may result in different behavior in some cases.a4bc59c83b1d9 -
Internally refactors stateless variant from class component to function component778c15c1d279a -
[ux] Removed feature flag platform.design-system-team.dynamic-table-typography_7zio6 resulting
in minor visual changes to typography.#127511
db30e29344013 -
Widening range of react and react-dom peer dependencies from ^16.8.0 || ^17.0.0 || ~18.2.0
to the wider range of ``^16.8.0 || ^17.0.0 || ^18.0.0` (where applicable).
This change has been done to enable usage of react@18.3 as well as to have a consistent peer
dependency range for react and react-dom for /platform packages.
8b8090800a35d -
Bump peer dependency for react-dom to include version 17 and 18.223959ef57c80 -
Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime
is implicitly set to automatic.07080a7364c9 -
Update dimension and font size values to be in rem. Internal change to use typography tokens.e66644a98985 -
Updated TypeScript types for the forwardedRef prop in withSortedPageRows to improve
compatibility with React 186b1707c169e0 -
The internal composition of this component has changed. There is no expected change in behaviour.6d27545ac997 -
Dynamic table now also respects test IDs when passed in at the row level.2579643f7ac8 -
Dynamic table now respects test IDs when passed in at the cell level. Note that there are no
prefixes applied to this test ID. It is assumed that if you are providing a test ID at the cell
level, you are wanting to target a single cell in an isolated context. If you're looking to gain
insight to a particular cell in the context of its surrounding elements, it might be preferrable
to supply a test ID to the root of the table and use the generated test IDs for querying instead.91d4a48c1430 -
Support better loading state for assistive tech#66438
334df1af360b -
[ux] react-beautiful-dnd is now lazy loaded for rankable tables. It will no longer be loaded for
non-rankable tables.
Tests relying on ranking being synchronously available may need to be modified.
0dc821f0ecba -
[ux] Use td over th when a table head cell has no content.da342e5ab42 - Remove
extraneous span from head cell.da342e5ab42 - test07aa588c8a4 - Reverts
the fix to text descender cut-off, due to incompatibilities with Firefox and Safari.6900f89eb0e - Internal
changes to use space tokens. There is no expected visual or behaviour change.56b444b56a8 - Fix a
bug where text descenders were cut off at high zoom levels on Windowsa486e54d1ef - Improved
performance of built-in table sorting for stateful dynamic tables4ae083a7e66 - Use
@af/accessibility-testing for default jest-axe config and jest-axe import in accessibility
testing.599bfe90ee3 - Internal
change to use shape tokens. There is no expected visual change.12d9c63d4c1 - [ux]
pass pageLabel to dynamic-table component and updat prev label in examples, add description in the
types file, update example files56507598609 - Skip
minor dependency bumpcdb1910463d - [ux]
Adds buttons to sortable table head cells for better accessibility for keyboard and assistive
technology users.e2f0271eaf9 - This
changeset exists because a PR touches these packages in a way that doesn't require a releasedf9b2633fe4 - [ux]
Adds aria-sort to sortable headers when being used to sort.261420360ec - Upgrades
component types to support React 18.18aeca8c199 - Internal
change to update token references. There is no expected behaviour or visual change.b0f6dd0bc35 - Updated
to use typography tokens. There is no expected behaviour or visual change.f96f3ebd861 - [ux] Use
color.background.neutral.subtle token to represent transparent background.d0298c778ed - Added
additional testId props for testing purposesbc989043572 - Internal
changes to apply spacing tokens. This should be a no-op change.ba5370e80b4 - Update
table row background color on drag to better match design token semanticsf9cd9e55e43 - Update
to disabled tokens which slightly affects the opacity in disabled statesf88eb89b356 - Updates
@emotion/core to @emotion/react; v10 to v11. There is no expected behavior change.12e03c6416b - Allow
className on internal components for css prop functionality. There should be no change in
behaviour.266abf54eea - [ux]
Pagination no longer renders when rowsPerPage is set, but there's only one page of content39e49a80bee - Remove
adding undefined to css if width is 'undefined'f619b95cd00 - [ux] bug
fix: table no longer shows empty page, when number of pages reduced31cf385e99b - DSP-2011
Change dynamically generated styles to be static8202e37941b - Internal
code change turning on new linting rules.02eb9c1c335 - [ux] Fix
table row shift 1px when dragging first table row issuedeca22d60e1 - Update
DynamicTable HeaderCellType to make it clear that the width prop takes a percentage not a pixel
value1cc3c9f1c8f - Add test
ID to table pagination so it can be queried in tests. It will be prefixed with the testId prop:
{testId}--pagination.0b545855a57 - [ux]
Updated tokens in @atlaskit/dynamic-table62edf20ab1e - Migrates
all usage of brand tokens to either selected or information tokens. This change is purely for
semantic reasons, there are no visual or behavioural changes.19d72473dfb - Rows can
now also be highlighted using the isHighlighted property inside the rows data19d72473dfb - Updates
usage of deprecated token names so they're aligned with the latest naming conventions. No UI or
visual changesf460cc7c411 - Builds
for this package now pass through a tokens babel plugin, removing runtime invocations of the
tokens() function and improving bundle size.78a7ffa81f8 - Fixes a
bug that meant an undefined width would still be stringifed and applied to the inline styles of
table cells.#14777
dc35866892f - [ux]
Instrumented dynamic-table with the new theming package, @atlaskit/tokens.
New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha). These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
ca00a7783a9 - Removes
styled-components as a peer dependency in favour of a direct dependency on emotion.
cf853e39278 - Internal
changes to remove @atlaskit/theme/math usage.7da3e890032 - [ux]
highlightedRowIndex now can be a list of numbers (number[]), as well as number. Also
highlighted rows now have B50/B75 colour.aa66648082f - Add
support for aria attributes on the tablebf041942c3a - Added
styles to HeadCell to be visible when windows high contrast mode is turned on.79c23df6340 - Use
injected package name and version for analytics instead of version.json.cd41357bdb0 - Added
total number of records for paginated data set to be passed as an optional prop952019cfd39 - Removed
extraneous/unnecessary dependencies for design system components.5f58283e1f - Export
types using Typescript's new "export type" syntax to satisfy Typescript's --isolatedModules
compiler option. This requires version 3.8 of Typescript, read more about how we handle Typescript
versions here: https://atlaskit.atlassian.com/get-started Also add typescript to
devDependencies to denote version that the package was built with.#3885
6c525a8229 - Upgraded
to TypeScript 3.9.6 and tslib to 2.0.0
Since tslib is a dependency for all our packages we recommend that products also follow this tslib upgrade to prevent duplicates of tslib being bundled.
dff687b37a - Expose
onKeyPress prop for dynamic-table and use it to show mediaViewere9a1942ae0 - Set the
attribute data-testid on the loading spinners. The convention follows the existing
${testId}--loadingSpinner.930e4aea2b - fix a bug
where DynamicTable is used with Suspense87f4720f27 - Officially
dropping IE11 support, from this version onwards there are no warranties of the package working in
IE11. For more information see:
https://community.developer.atlassian.com/t/atlaskit-to-drop-support-for-internet-explorer-11-from-1st-july-2020/39534e8b1104637 - Previously
when sorting the rows weren’t using a stable key - thus they would re-mount unexpectedly! This has
been fixed now.3cac2203ba -
Previously, sorting columns in dynamic table wouldn’t persist the page when table was updated, Now
user will be able to apply sorting on dynamic table and page will be remain same even after
updating table54a9514fcf - Build and
supporting files will no longer be published to npm54d82b49f0 - Remove
unused dependenciesbaaad91b65 - Updated to
use the latest and more performant version of @atlaskit/avatar[patch]dfc4dba1b3:
Change imports to comply with Atlassian conventions- Updated dependencies 9e4b195732:
Updated dependencies 6b8e60827e:
Updated dependencies 167a55fd7a:
Updated dependencies 57c0487a02:
Updated dependencies fd41d77c29:
Updated dependencies 7a2540821c:
[patch]109004a98e:
Deletes internal package @atlaskit/type-helpers and removes all usages. @atlaskit/type-helpers has been superseded by native typescript helper utilities.- Updated dependencies 168b5f90e5:
Updated dependencies 0c270847cb:
Updated dependencies 109004a98e:
Updated dependencies b9903e773a:
[minor]0b09f8a6ca:
add focus style using blue outline
[patch]6548261c9a:
Remove namespace imports from React, ReactDom, and PropTypes- Updated dependencies 6548261c9a:
[patch]4a223473c5:
Removes babel/runtime from dependencies. Users should see a smaller bundlesize as a result- Updated dependencies 6dccb16bfc:
Updated dependencies 82747f2922:
Updated dependencies 4a223473c5:
[minor]24865cfaff:
Moving to react-beautiful-dnd 12.x internally. No API changes
[patch]d222c2b987:
Theme has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided.
** getTokens props changes ** When defining the value function passed into a ThemeProvider, the
getTokens parameter cannot be called without props; if no props are provided an empty object {}
must be passed in:
<CustomTheme.Provider
value={t => ({ ...t(), backgroundColor: '#333'})}
>
becomes:
<CustomTheme.Provider
value={t => ({ ...t({}), backgroundColor: '#333'})}
>
** Color palette changes ** Color palettes have been moved into their own file. Users will need to update imports from this:
import { colors } from '@atlaskit/theme';
colors.colorPalette('8');
to this:
import { colorPalette } from '@atlaskit/theme';
colorPalette.colorPalette('8');
or for multi entry-point users:
import * as colors from '@atlaskit/theme/colors';
colors.colorPalette('8');
to this:
import * as colorPalettes from '@atlaskit/theme/color-palette';
colorPalettes.colorPalette('8');
[minor]19e5d77c84:
Adding an optional prop testId that will set the attribute value data-testid. It will help
products to write better integration and end to end tests.
[minor]97a4a48f58:
[patch]35d2229b2a:
Adding missing license to packages and update to Copyright 2019 Atlassian Pty Ltd.
[patch]a2d0043716:
Updated version of analytics-next to fix potential incompatibilities with TS 3.6
[patch]8a244b1dfd:
DynamicTable Stateful now sends analytics events via the onSort prop
[minor]565e5c71db:
Add ability to highlight a row in the table based on the index (0 based index) of the current visible page.
[minor]c6efb2f5b6:
Prefix the legacy lifecycle methods with UNSAFE_* to avoid warning in React 16.9+
More information about the deprecation of lifecycles methods can be found here: https://reactjs.org/blog/2018/03/29/react-v-16-3.html#component-lifecycle-changes
[patch]097b696613:
Components now depend on TS 3.6 internally, in order to fix an issue with TS resolving non-relative imports as relative imports
[patch]708028db86:
Change all the imports to theme in Core to use multi entry points
[patch]926b43142b:
Analytics-next has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided. No behavioural changes.
Breaking changes
withAnalyticsForSumTypeProps alias has been removed, please use withAnalyticsEventsAnalyticsContextWrappedComp alias has been removed, please use withAnalyticsContextBreaking changes to TypeScript annotations
withAnalyticsEvents now infers proptypes automatically, consumers no longer need to provide
props as a generic type.withAnalyticsContext now infers proptypes automatically, consumers no longer need to provide
props as a generic type.WithAnalyticsEventProps has been renamed to WithAnalyticsEventsProps to match source
codeCreateUIAnalyticsEventSignature has been renamed to CreateUIAnalyticsEvent to match
source codeUIAnalyticsEventHandlerSignature has been renamed to UIAnalyticsEventHandler to match
source codeAnalyticsEventsPayload has been renamed to AnalyticsEventPayloadObjectType has been removed, please use Record<string, any> or [key: string]: anyUIAnalyticsEventInterface has been removed, please use UIAnalyticsEventAnalyticsEventInterface has been removed, please use AnalyticsEventCreateAndFireEventFunction removed and should now be inferred by TypeScriptAnalyticsEventUpdater removed and should now be inferred by TypeScript[patch]9f8ab1084b:
Consume analytics-next ts type definitions as an ambient declaration.
[patch]d0db01b410:
TypeScript users of withAnalyticsEvents and withAnalyticsContext are now required to provide props as a generic type. This is so that TypeScript can correctly calculate the props and defaultProps of the returned component.
Before:
withAnalyticsEvents()(Button) as ComponentClass<Props>;
After:
withAnalyticsEvents<Props>()(Button);
[minor]647118a5ce:
[patch]b0ef06c685:
[major]3d95467c4b:
[major]7c17b35107:
[patch]08321f585d:
[major]76299208e6:
As a breaking change, all @atlaskit packages will be dropping cjs distributions and will only
distribute esm. This means all distributed code will be transpiled, but will still contain
import and export declarations.
The major reason for doing this is to allow us to support multiple entry points in packages, e.g:
import colors from `@atlaskit/theme/colors`;
Previously this was sort of possible for consumers by doing something like:
import colors from `@atlaskit/theme/dist/esm/colors`;
This has a couple of issues. 1, it treats the file system as API making internal refactors harder, we have to worry about how consumers might be using things that aren't actually supposed to be used. 2. We are unable to do this internally in @atlaskit packages. This leads to lots of packages bundling all of theme, just to use a single color, especially in situations where tree shaking fails.
To support being able to use multiple entrypoints internally, we unfortunately cannot have multiple distributions as they would need to have very different imports from of their own internal dependencies.
ES Modules are widely supported by all modern bundlers and can be worked around in node environments.
We may choose to revisit this solution in the future if we find any unintended condequences, but we see this as a pretty sane path forward which should lead to some major bundle size decreases, saner API's and simpler package architecture.
Please reach out to #fabric-build (if in Atlassian) or create an issue in Design System Support (for external) if you have any questions or queries about this.
[patch]d026472527:
[patch]492b8ea:
colspan to cell type. Added example using colspan.[patch]abd3a39:
[patch]85b3592: