v7.1.0

🥃 New Features 🥃

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

v7.0.2

🐞 Fixes 🐞

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

v7.0.1

🐞 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

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

7.0.0-rc7

🎊 We are nearing an official 7.0.0 release! 🎊

📜 📜 Documentation 📜 📜

• This release is mainly been enhancing the documentation and moving to a new location. Please checkout the updated documentation https://react-data-table-component.netlify.app

🐞 🐞 Fixes 🐞 🐞

• There was a bug when using sortFunction and pagination together would result in broken sorting. This is now fixed.

7.0.0-rc6

🔥 🔥 Breaking Changes 🔥 🔥

• #422 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.

🐞 🐞 Fixes 🐞 🐞

• #422 fixedHeader scroll bar no longer offsets table columns. Note that fixedHeader relies on browsers that support sticky positioning.

7.0.0-rc5

🐞 🐞 Fixes 🐞 🐞

• #871 if the columns prop is changed it should now re-render DataTable.
• #871 fixed an issue where using pre selected rows, unchecking a row and then and sorting would reset pre selects, this should no longer happen

7.0.0-rc4

🐞 Fixes 🐞

• #859 fixes broken data table document not defined when using nextjs and pagination

7.0.0-rc3

🥃 🥃 New Features 🥃 🥃

• #356 draggable column reordering is now available! See the Columns section in the Readme for details.

🐞 🐞 Fixes 🐞 🐞

• #846 you can now override fontWeight when using custom styles in headCells

v6.11.8

Fixes

• #867 Make column.name optional when using typescript