Overidding Styling Using css-in-js with customStyles

For more advanced use cases you can override or replace the global default styling using the customStyles prop and passing in your own css-in-js.

Disclaimer: you're on your own here since you will have the power to not only customize but break RDT.

Let's apply a simple customStyles to override the default row height and change the cell padding:

import DataTable from 'react-data-table-component';

//  Internally, customStyles will deep merges your customStyles with the default styling.
const customStyles = {
	rows: {
		style: {
			minHeight: '72px', // override the row height
		},
	},
	headCells: {
		style: {
			paddingLeft: '8px', // override the cell padding for head cells
			paddingRight: '8px',
		},
	},
	cells: {
		style: {
			paddingLeft: '8px', // override the cell padding for data cells
			paddingRight: '8px',
		},
	},
};

const MyComponent = () => <DataTable title="Arnold Movies" columns={columns} customStyles={customStyles} />;
Copy

View styles.ts for a detailed catalog of RDT styles that you can override or extend using css-in-js objects.