Update dependency react-data-table-component to v7 #193

renovate · 2021-09-11T00:14:24Z

This PR contains the following updates:

Package	Change	Age	Confidence
react-data-table-component	`6.11.8` -> `7.7.0`

Release Notes

jbetancur/react-data-table-component (react-data-table-component)

`v7.7.0`

Compare Source

What's Changed

Fix Markdown Tables in Storybook (Netlify) by @ADTC in #1204
Fix width of table columns and fix some mistakes in Storybook (Netlify) by @ADTC in #1206
Add support for table aria-label (accessibility) by @deiberchacon in #1273
bump deps by @jbetancur in #1274

New Contributors

@ADTC made their first contribution in #1204
@deiberchacon made their first contribution in #1273

Full Changelog: jbetancur/react-data-table-component@v7.6.2...v7.7.0

`v7.6.2`

Compare Source

What's Changed

Fix declarations by @jbetancur in #1199

Full Changelog: jbetancur/react-data-table-component@v7.6.1...v7.6.2

`v7.6.1`

Compare Source

What's Changed

fix broken stories by @jbetancur in #1197

Full Changelog: jbetancur/react-data-table-component@v7.6.0...v7.6.1

`v7.6.0`

Compare Source

What's Changed

update expandableRowsComponentProps name in docs by @rdubrock in #1189
Fix typo in patterns story by @samrobbins85 in #1180
update deps | styled | react by @jbetancur in #1195
- This is generally a maintenance release that should resolve various errors including but not limited to react 18 and styled-components 6

New Contributors

@rdubrock made their first contribution in #1189
@samrobbins85 made their first contribution in #1180

Full Changelog: jbetancur/react-data-table-component@v7.5.4...v7.6.0

`v7.5.4`

Compare Source

Fixes #1154 - thank you @HendrikPetertje !

`v7.5.3`

Compare Source

Fixes

#1076 className should now pass to responsiveWrapper

`v7.5.2`

Compare Source

Fixes

fixes infinite re-render when using setState or useState hooks within onSort

`v7.5.1`

Compare Source

Features

#1047 adds sorted columns as a 3rd prop for onSort

`v7.5.0`

Compare Source

Features

#1027 adds row event handlers for mouse. thank you @gsimko !

`v7.4.7`

Compare Source

fixes #988

`v7.4.6`

Compare Source

Bug Fixes

#975 using custom a custom theme name should no longer cause TypeScript to complain

Maintenance

Update deprecated deps
Update deps

`v7.4.5`

Compare Source

🥃 Features 🥃

#945 selectableRowsSingle should now work with selectableRowSelected, however if you have more than one match only the first match will be selected.

`v7.4.4`

Compare Source

🥃 Features 🥃

Expose ExpanderComponentProps TypeScript type. You can now:

type DataRow = {
....
};

const ExpandedComponent: React.FC<ExpanderComponentProps<DataRow>> = ({ data }) => {
	return <pre>{JSON.stringify(data, null, 2)}</pre>;
};

// or

function ExpandedComponent({ data }: ExpanderComponentProps<DataRow>): JSX.Element {
	return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

`v7.4.3`

Compare Source

🐞 Fixes 🐞

#937 fixes TypeError: Attempting to change configurable attribute of unconfigurable on the data prop for certain use cases

`v7.4.2`

Compare Source

🐞 Fixes 🐞

#930 when using onSelectedRowsChange no longer causes infinite loop when updating table data within onSelectedRowsChange
#934 fixed expandableRowsComponent types

`v7.4.1`

Compare Source

🐞 Fixes 🐞

createTheme no longer requires an inherited theme

`v7.4.0`

Compare Source

🥃 Features 🥃

lodash.orderBy has been removed and replaced with native sorting. lodash was a bit heavy weight as a dependency (the bundle should be smaller now) and slower than native sort in some of our performance tests (basically negligible). If you want really miss the lodash.orderBy sorting behavior you can install lodash yourself and use sortFunction to re-implement orderBy.

🐞 Fixes 🐞

#933 when using createTheme you may now specify one of the default themes to inherit from. This is useful if you only need to tweak a thing or 2 in each theme. See the custom theming for more details

`v7.3.1`

Compare Source

🐞 Fixes 🐞

#922 context menu should now be visible when selecting rows

`v7.3.0`

Compare Source

🥃 New Features 🥃

Column titles will now display a built in tooltip (using the title attribute) when a column is in a ellipses state
- This will be negated when you pass a component into a column name.

🐞 Fixes 🐞

Fixes an issue where sort direction would default if data changes. Sort behavior should now be preserved
Fixes a spacing issue in columns titles

`v7.2.1`

Compare Source

🐞 Fixes 🐞

#919 No longer apply css styles when column.name is a component

`v7.2.0`

Compare Source

🐞 Fixes 🐞

This releases fixes type inference where passing your Data type/interface was conflicting with an internal typing TableRow. This should no longer be the case.

`v7.1.0`

Compare Source

🥃 New Features 🥃

#901 #909 - conditional styles for both rows and cells now accepts classNames

`v7.0.2`

Compare Source

🐞 Fixes 🐞

#906 fixes "Could not find a declaration file for module 'react-data-table-component'"

`v7.0.1`

Compare Source

🐞 Bug Fixes 🐞

setting defaultSortFieldId now works properly
added back alias for IDataTableRow (which is now TableRow to make migrating from v6 to v7 easier

🥃 New Features 🥃

allow importing TableRow type

📜 Documentation 📜

fixes some documentation issues
adds typescript docs
adds pattern docs

🏡 Housekeeping 🏡

refactor to naming of components
internal tweaks to types
refactored sorting styles to be more customizable where possible

TypeScript Projects with React Data Table

React Data Table is built with TypeScript so typings are buit in. Let's implement React Data Table in a TypeScript project:

First, we'll need to define our data type (or interface):

import DataTable, { TableColumn } from 'react-data-table-component';

type DataRow {
	title: string;
	director: string;
	year: string;
}

Alternatively, if you want to define DataRow as an interface you will need to extend the built in TableRow type:

import DataTable, { TableColumn, TableRow } from 'react-data-table-component';

interface DataRow extends TableRow {
	title: string;
	director: string;
	year: string;
}

Next, we can create our columns. TableColumn is an interface representing a column definition that takes a generic parameter. By passing TableColumn<DataRow>[] we now have access to our dataRow props on any property in our table columns for any propery that accesses our data:

const columns: TableColumn<DataRow>[] = [
	{
		name: 'Title',
		selector: row => row.title,
	},
	{
		name: 'Director',
		selector: row => row.director,
	},
	{
		name: 'Year',
		selector: row => row.year,
	},
];

Finally, we can implement our TypeScript component that uses DataTable:

function MyComponent(): JSX.Element {
	return <DataTable columns={columns} data={data} />;
}

Alternatively, if you prefer using React.FC:

const MyComponent: React.FC = () => {
	return <DataTable columns={columns} data={data} />;
};

Putting it all together:

import DataTable, { TableColumn } from 'react-data-table-component';

type DataRow {
	title: string;
	director: string;
	year: string;
}

const columns: TableColumn<DataRow>[] = [
	{
		name: 'Title',
		selector: row => row.title,
	},
	{
		name: 'Director',
		selector: row => row.director,
	},
	{
		name: 'Year',
		selector: row => row.year,
	},
];

function MyComponent(): JSX.Element {
	return <DataTable columns={columns} data={data} />;
}

export default MyComponent;

`v7.0.0`

Compare Source

After several long months Version 7.0.0 is now available. The most notable change is that RDT 7 has been ported over to TypeScript which as it turns out resolved a number of bugs both unknown and long standing. This however, introduced some breaking changes to the API which are noted below. Also RDT v7 introduces several new features such as draggable columns, single row selection and the ability to pass props to expander components as well as vastly improved documentation.

Thank you all for your patience and to those that contributed PR's and/or feedback!

🔥 🔥 BREAKING CHANGES 🔥 🔥

expandableRowsComponent no longer accepts JSX and must now be passed in as a function/class. e.g.:
GOOD:
expandableRowsComponent={MyExpander}
BAD:
expandableRowsComponent={<MyExpander />}
sortFunction prop signature has changed, This was necessary because RDT is moving to function only selectors which are more flexible and performant. Additionally, this allows the API user greater control over how they sort. See the README for details Custom Sort Function.
defaultSortfField is now defaultSortFieldId where you use a column ID instead of a name.
If you do not assign an id to each of your column definitions RDT will add a number based id starting with 1,2,3,...
overflowY and overflowYOffset have been removed from the API as they were problematic when using fixedHeader. These were originally created to deal menu overlays that did not use dynamic positioning - causing a menu to be truncated at the bottom of the table. Most UI libraries should support dynamically positioned menus, but in any case this is no longer the responsibility of RDT to manage.
TypeScript targets have been upgraded to es6 from es5. This might cause issues with older browsers "possibly" IE 11. RDT has not supported IE11 in the past and will not in the future.

🥃 🥃 New Features 🥃 🥃

Draggable column reordering is now available! See the Columns section in the Docs for details.
Single row selection feature is now available via a new prop selectableRowsSingle . If you want to change the built in checkbox to a radio button you can pass selectableRowsComponentProps={{ type: 'radio' }} or pass in your own custom/ui library Radio button using both selectableRowsComponent and selectableRowsComponentProps
Added a new prop: expandableRowsComponentProps now allows you to pass extra props to your custom expandableRowsComponent.

🐞 🐞 Fixes 🐞 🐞

fixedHeader scroll bar no longer offsets table columns. Note that fixedHeader relies on browsers that support sticky positioning.
Cleanup of stale sorting logic and CSS styles
TableHeadRow is no longer disabled when in a loading state. Instead, each TableCol is disabled from sorting
fixes a potential performance issue with large data sets and conditionalCells and conditionalRows
sortServer should now disable internal sorting as it did in v6
column centering show now work for both cells and cols
update peerDependencies for React 17
when using fixedHeader only show scroll bars when needed
fixes pagination select dropdown icon which was overlapping on larger numbers (e.g. 100, 1000 etc)
fixes double horizontal bar in some browsers. Thanks @HoangNguyen17193
you can now override fontWeight when using custom styles in headCells
fixes broken data table document not defined when using nextjs and pagination
if the columns prop is changed it should now re-render DataTable.
fixed an issue where using pre selected rows, unchecking a row and then and sorting would reset pre selects, this should no longer happen
There was a bug when using sortFunction and pagination together would result in broken sorting. This is now fixed.

📜📜 Documentation 📜📜

Documentation has been vastly improved. If you have ideas for additions or fixes please submit a PR!
The original plan was to do a custom documentation site, however, given some time constraints it was decided stick with storybook and implement some of it's newer features.

👋 👋 Deprecations 👋 👋

string selectors will display a console warning on non prod builds recommended you migrate to function selectors. This change is rather painless: selector: 'name' becomes selector: row => row.name. This not only allows for typing but also no longer requires an expensive regex/reduce function to loop through a row to "get' the prop

Configuration

📅 Schedule: Branch creation - "every weekend" (UTC), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

If you want to rebase/retry this PR, check this box

This PR was generated by Mend Renovate. View the repository job log.

vercel · 2021-09-11T00:14:29Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/d2p/skyfall/F2wzmJepb82pKUC5EQYWVqgLg5yr
✅ Preview: https://skyfall-git-renovate-react-data-table-component-7x-d2p.vercel.app

vercel · 2022-04-25T02:58:33Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
skyfall	❌ Failed (Inspect)			Jan 12, 2024 5:54pm

renovate · 2022-04-25T02:58:33Z

⚠ Artifact update problem

Renovate failed to update an artifact related to this branch. You probably do not want to merge this PR as-is.

♻ Renovate will retry this branch, including artifacts, only when one of the following happens:

any of the package files in this branch needs updating, or
the branch becomes conflicted, or
you click the rebase/retry checkbox if found above, or
you rename this PR's title to start with "rebase!" to trigger it manually

The artifact failure details are included below:

File name: package-lock.json

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @airbnb/[email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"17.0.1" from the root project
npm ERR!   peer react@"^16.9.0 || ^17" from @next/[email protected]
npm ERR!   node_modules/@next/react-dev-overlay
npm ERR!     @next/react-dev-overlay@"10.2.3" from [email protected]
npm ERR!     node_modules/next
npm ERR!       next@"10.2.3" from the root project
npm ERR!   12 more (interweave, interweave-autolink, interweave-emoji, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0" from @airbnb/[email protected]
npm ERR! node_modules/@airbnb/lunar
npm ERR!   @airbnb/lunar@"3.28.1" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/react
npm ERR!   peer react@"^16.8.0" from @airbnb/[email protected]
npm ERR!   node_modules/@airbnb/lunar
npm ERR!     @airbnb/lunar@"3.28.1" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /tmp/renovate/cache/others/npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /tmp/renovate/cache/others/npm/_logs/2024-01-12T17_53_57_757Z-debug-0.log

renovate · 2025-02-25T05:32:23Z

⚠️ Artifact update problem

Renovate failed to update an artifact related to this branch. You probably do not want to merge this PR as-is.

♻ Renovate will retry this branch, including artifacts, only when one of the following happens:

any of the package files in this branch needs updating, or
the branch becomes conflicted, or
you click the rebase/retry checkbox if found above, or
you rename this PR's title to start with "rebase!" to trigger it manually

The artifact failure details are included below:

File name: package-lock.json

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @airbnb/[email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"17.0.1" from the root project
npm ERR!   peer react@"^16.9.0 || ^17" from @next/[email protected]
npm ERR!   node_modules/@next/react-dev-overlay
npm ERR!     @next/react-dev-overlay@"10.2.3" from [email protected]
npm ERR!     node_modules/next
npm ERR!       next@"10.2.3" from the root project
npm ERR!   12 more (interweave, interweave-autolink, interweave-emoji, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0" from @airbnb/[email protected]
npm ERR! node_modules/@airbnb/lunar
npm ERR!   @airbnb/lunar@"3.28.1" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/react
npm ERR!   peer react@"^16.8.0" from @airbnb/[email protected]
npm ERR!   node_modules/@airbnb/lunar
npm ERR!     @airbnb/lunar@"3.28.1" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /runner/cache/others/npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /runner/cache/others/npm/_logs/2025-12-03T17_51_16_208Z-debug-0.log

vercel bot deployed to Preview September 11, 2021 00:14 View deployment

renovate bot force-pushed the renovate/react-data-table-component-7.x branch from 1f45f1a to 5782109 Compare September 11, 2021 21:53

vercel bot deployed to Preview September 11, 2021 21:53 View deployment

renovate bot force-pushed the renovate/react-data-table-component-7.x branch from 5782109 to 8b1bf23 Compare September 13, 2021 12:23

vercel bot deployed to Preview September 13, 2021 12:23 View deployment

renovate bot force-pushed the renovate/react-data-table-component-7.x branch from 8b1bf23 to 4d742dc Compare September 14, 2021 04:30

vercel bot deployed to Preview September 14, 2021 04:30 View deployment

renovate bot force-pushed the renovate/react-data-table-component-7.x branch from 4d742dc to d93207e Compare September 19, 2021 15:06

vercel bot deployed to Preview September 19, 2021 15:06 View deployment

renovate bot force-pushed the renovate/react-data-table-component-7.x branch from d93207e to ffe4a53 Compare September 22, 2021 21:47

vercel bot deployed to Preview September 22, 2021 21:47 View deployment

renovate bot force-pushed the renovate/react-data-table-component-7.x branch from ffe4a53 to 55436a4 Compare September 23, 2021 14:49

vercel bot deployed to Preview September 23, 2021 14:49 View deployment

renovate bot force-pushed the renovate/react-data-table-component-7.x branch from 55436a4 to 332c148 Compare September 25, 2021 20:54

vercel bot deployed to Preview September 25, 2021 20:54 View deployment

renovate bot force-pushed the renovate/react-data-table-component-7.x branch from 332c148 to 3d3627f Compare October 6, 2021 03:10

vercel bot deployed to Preview October 6, 2021 03:10 View deployment

renovate bot force-pushed the renovate/react-data-table-component-7.x branch from 3d3627f to cdf337e Compare October 10, 2021 15:47

vercel bot deployed to Preview October 10, 2021 15:47 View deployment

renovate bot force-pushed the renovate/react-data-table-component-7.x branch from cdf337e to 1cc8b0b Compare October 11, 2021 16:20

vercel bot deployed to Preview October 11, 2021 16:21 View deployment

renovate bot force-pushed the renovate/react-data-table-component-7.x branch from 1cc8b0b to 22efa99 Compare October 27, 2021 02:53

vercel bot deployed to Preview October 27, 2021 02:53 View deployment

renovate bot force-pushed the renovate/react-data-table-component-7.x branch from 22efa99 to 98d4133 Compare December 18, 2021 17:09

vercel bot deployed to Preview December 18, 2021 17:09 View deployment

renovate bot force-pushed the renovate/react-data-table-component-7.x branch from 98d4133 to fc90021 Compare January 23, 2022 15:37

vercel bot deployed to Preview January 23, 2022 15:37 View deployment

renovate bot force-pushed the renovate/react-data-table-component-7.x branch from fc90021 to e5f760a Compare April 25, 2022 02:58

vercel bot deployed to Preview April 25, 2022 02:59 View deployment

renovate bot force-pushed the renovate/react-data-table-component-7.x branch from e5f760a to 5d6ece9 Compare May 16, 2022 01:47

vercel bot deployed to Preview May 16, 2022 01:49 View deployment

renovate bot force-pushed the renovate/react-data-table-component-7.x branch from 5d6ece9 to f20157f Compare September 25, 2022 11:45

renovate bot changed the title ~~Update dependency react-data-table-component to v7~~ fix(deps): update dependency react-data-table-component to v7 Sep 25, 2022

vercel bot deployed to Preview September 25, 2022 11:47 View deployment

renovate bot changed the title ~~fix(deps): update dependency react-data-table-component to v7~~ Update dependency react-data-table-component to v7 Mar 16, 2023

renovate bot force-pushed the renovate/react-data-table-component-7.x branch from f20157f to dc59706 Compare August 24, 2023 12:32

vercel bot had a problem deploying to Preview August 24, 2023 12:32 Failure

renovate bot force-pushed the renovate/react-data-table-component-7.x branch from dc59706 to cd24e44 Compare January 12, 2024 03:47

vercel bot had a problem deploying to Preview January 12, 2024 03:47 Failure

renovate bot force-pushed the renovate/react-data-table-component-7.x branch from cd24e44 to cc9fd1b Compare January 12, 2024 07:19

vercel bot had a problem deploying to Preview January 12, 2024 07:19 Failure

renovate bot force-pushed the renovate/react-data-table-component-7.x branch from cc9fd1b to 4332d78 Compare January 12, 2024 17:54

vercel bot had a problem deploying to Preview January 12, 2024 17:54 Failure

Update dependency react-data-table-component to v7

f602597

renovate bot force-pushed the renovate/react-data-table-component-7.x branch from 4332d78 to f602597 Compare February 25, 2025 05:32

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Update dependency react-data-table-component to v7 #193

Update dependency react-data-table-component to v7 #193

Uh oh!

renovate bot commented Sep 11, 2021 •

edited

Loading

Uh oh!

vercel bot commented Sep 11, 2021 •

edited

Loading

Uh oh!

vercel bot commented Apr 25, 2022 •

edited

Loading

Uh oh!

renovate bot commented Apr 25, 2022 •

edited

Loading

Uh oh!

renovate bot commented Feb 25, 2025 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Update dependency react-data-table-component to v7 #193

Are you sure you want to change the base?

Update dependency react-data-table-component to v7 #193

Uh oh!

Conversation

renovate bot commented Sep 11, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Release Notes

What's Changed

New Contributors

What's Changed

What's Changed

What's Changed

New Contributors

Fixes

Fixes

Features

Features

Bug Fixes

Maintenance

🥃 Features 🥃

🥃 Features 🥃

🐞 Fixes 🐞

🐞 Fixes 🐞

🐞 Fixes 🐞

🥃 Features 🥃

🐞 Fixes 🐞

🐞 Fixes 🐞

🥃 New Features 🥃

🐞 Fixes 🐞

🐞 Fixes 🐞

🐞 Fixes 🐞

🥃 New Features 🥃

🐞 Fixes 🐞

🐞 Bug Fixes 🐞

🥃 New Features 🥃

📜 Documentation 📜

🏡 Housekeeping 🏡

TypeScript Projects with React Data Table

🔥 🔥 BREAKING CHANGES 🔥 🔥

🥃 🥃 New Features 🥃 🥃

🐞 🐞 Fixes 🐞 🐞

📜📜 Documentation 📜📜

👋 👋 Deprecations 👋 👋

Configuration

Uh oh!

vercel bot commented Sep 11, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel bot commented Apr 25, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

renovate bot commented Apr 25, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠ Artifact update problem

File name: package-lock.json

Uh oh!

renovate bot commented Feb 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ Artifact update problem

File name: package-lock.json

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

renovate bot commented Sep 11, 2021 •

edited

Loading

vercel bot commented Sep 11, 2021 •

edited

Loading

vercel bot commented Apr 25, 2022 •

edited

Loading

renovate bot commented Apr 25, 2022 •

edited

Loading

renovate bot commented Feb 25, 2025 •

edited

Loading