[pull] master from jbetancur:master

CHANGELOG.md

@@ -2,6 +2,15 @@
 
 A summary of notable changes per release. For the full commit history see the [repository on GitHub](https://github.com/jbetancur/react-data-table-component/commits/master).
 
+## 8.6.2
+
+### Bug fixes
+
+- A numeric pixel value for `TableColumn.hide` (e.g. `hide: 480`) was a no-op — the column stayed visible at every width. Numeric breakpoints stopped working in the v8 refactor; the type now accepts only `Media` (`'sm' | 'md' | 'lg'`) to match. For a custom breakpoint, track viewport width yourself and toggle the column's `omit` prop instead. → [Mobile](/docs/mobile) ([#1346](https://github.com/jbetancur/react-data-table-component/issues/1346))
+- Fixed `highlightOnHover` not showing when a row's background color was set via `customStyles.rows.style`, since the inline style was winning over the hover class. → [Styling](/docs/custom-styles) ([#1351](https://github.com/jbetancur/react-data-table-component/pull/1351))
+
+---
+
 ## 8.6.1
 
 ### Bug fixes

apps/docs/src/components/demos/ApprovalWorkflowDemo.tsx

@@ -14,27 +14,83 @@ interface Request {
 }
 
 const STATUS_LABEL: Record<Status, string> = {
-	'pending':    'Pending',
-	'approved':   'Approved',
-	'rejected':   'Rejected',
+	pending: 'Pending',
+	approved: 'Approved',
+	rejected: 'Rejected',
 	'needs-info': 'Needs info',
 };
 
 const STATUS_CLASS: Record<Status, string> = {
-	'pending':    'bg-yellow-50 text-yellow-700 border border-yellow-200',
-	'approved':   'bg-green-50 text-green-700 border border-green-200',
-	'rejected':   'bg-red-50 text-red-700 border border-red-200',
+	pending: 'bg-yellow-50 text-yellow-700 border border-yellow-200',
+	approved: 'bg-green-50 text-green-700 border border-green-200',
+	rejected: 'bg-red-50 text-red-700 border border-red-200',
 	'needs-info': 'bg-blue-50 text-blue-700 border border-blue-200',
 };
 
 const initialData: Request[] = [
-	{ id: 1, title: 'New MacBook Pro',       requester: 'Sam Rivera',    department: 'Engineering', amount: 2499, status: 'pending',    submittedAt: '2024-05-14' },
-	{ id: 2, title: 'Figma Teams plan',      requester: 'Priya Kapoor',  department: 'Design',      amount: 720,  status: 'pending',    submittedAt: '2024-05-14' },
-	{ id: 3, title: 'AWS reserved instance', requester: 'Aria Chen',     department: 'Engineering', amount: 8400, status: 'needs-info', submittedAt: '2024-05-13' },
-	{ id: 4, title: 'Office chairs (x4)',    requester: 'Marcus Webb',   department: 'Product',     amount: 1200, status: 'pending',    submittedAt: '2024-05-12' },
-	{ id: 5, title: 'Tableau license',       requester: 'Jordan Ellis',  department: 'Analytics',   amount: 1800, status: 'approved',   submittedAt: '2024-05-10' },
-	{ id: 6, title: 'Conference travel',     requester: 'Taylor Brooks', department: 'Sales',       amount: 950,  status: 'rejected',   submittedAt: '2024-05-09' },
-	{ id: 7, title: 'Slack Enterprise',      requester: 'Casey Morgan',  department: 'Engineering', amount: 3600, status: 'pending',    submittedAt: '2024-05-08' },
+	{
+		id: 1,
+		title: 'New MacBook Pro',
+		requester: 'Sam Rivera',
+		department: 'Engineering',
+		amount: 2499,
+		status: 'pending',
+		submittedAt: '2024-05-14',
+	},
+	{
+		id: 2,
+		title: 'Figma Teams plan',
+		requester: 'Priya Kapoor',
+		department: 'Design',
+		amount: 720,
+		status: 'pending',
+		submittedAt: '2024-05-14',
+	},
+	{
+		id: 3,
+		title: 'AWS reserved instance',
+		requester: 'Aria Chen',
+		department: 'Engineering',
+		amount: 8400,
+		status: 'needs-info',
+		submittedAt: '2024-05-13',
+	},
+	{
+		id: 4,
+		title: 'Office chairs (x4)',
+		requester: 'Marcus Webb',
+		department: 'Product',
+		amount: 1200,
+		status: 'pending',
+		submittedAt: '2024-05-12',
+	},
+	{
+		id: 5,
+		title: 'Tableau license',
+		requester: 'Jordan Ellis',
+		department: 'Analytics',
+		amount: 1800,
+		status: 'approved',
+		submittedAt: '2024-05-10',
+	},
+	{
+		id: 6,
+		title: 'Conference travel',
+		requester: 'Taylor Brooks',
+		department: 'Sales',
+		amount: 950,
+		status: 'rejected',
+		submittedAt: '2024-05-09',
+	},
+	{
+		id: 7,
+		title: 'Slack Enterprise',
+		requester: 'Casey Morgan',
+		department: 'Engineering',
+		amount: 3600,
+		status: 'pending',
+		submittedAt: '2024-05-08',
+	},
 ];
 
 const ACTIONABLE: Status[] = ['pending', 'needs-info'];
@@ -51,7 +107,7 @@ export default function ApprovalWorkflowDemo() {
 	}
 
 	function applyStatus(ids: number[], next: Status) {
-		setData(prev => prev.map(r => ids.includes(r.id) ? { ...r, status: next } : r));
+		setData(prev => prev.map(r => (ids.includes(r.id) ? { ...r, status: next } : r)));
 		ref.current?.clearSelectedRows();
 		showToast(`${ids.length} request${ids.length !== 1 ? 's' : ''} marked as "${STATUS_LABEL[next]}"`);
 	}
@@ -60,9 +116,9 @@ export default function ApprovalWorkflowDemo() {
 	const selectedIds = actionable.map(r => r.id);
 
 	const columns: TableColumn<Request>[] = [
-		{ id: 'title',      name: 'Request',    selector: r => r.title,      grow: 2 },
-		{ id: 'requester',  name: 'Requester',  selector: r => r.requester,  sortable: true },
-		{ id: 'department', name: 'Dept',       selector: r => r.department, sortable: true, width: '120px' },
+		{ id: 'title', name: 'Request', selector: r => r.title, grow: 2 },
+		{ id: 'requester', name: 'Requester', selector: r => r.requester, sortable: true },
+		{ id: 'department', name: 'Dept', selector: r => r.department, sortable: true, width: '120px' },
 		{
 			id: 'amount',
 			name: 'Amount',
@@ -79,9 +135,7 @@ export default function ApprovalWorkflowDemo() {
 			sortable: true,
 			width: '130px',
 			cell: r => (
-				<span className={`text-xs px-2 py-0.5 rounded-full ${STATUS_CLASS[r.status]}`}>
-					{STATUS_LABEL[r.status]}
-				</span>
+				<span className={`text-xs px-2 py-0.5 rounded-full ${STATUS_CLASS[r.status]}`}>{STATUS_LABEL[r.status]}</span>
 			),
 		},
 		{ id: 'submittedAt', name: 'Submitted', selector: r => r.submittedAt, sortable: true, width: '115px' },

apps/docs/src/components/demos/AuditLogDemo.tsx

@@ -14,35 +14,155 @@ interface LogEntry {
 }
 
 const SEVERITY_STYLE: Record<Severity, string> = {
-	info:     'bg-blue-50 text-blue-700 border border-blue-100',
-	warning:  'bg-yellow-50 text-yellow-700 border border-yellow-100',
-	error:    'bg-red-50 text-red-700 border border-red-100',
+	info: 'bg-blue-50 text-blue-700 border border-blue-100',
+	warning: 'bg-yellow-50 text-yellow-700 border border-yellow-100',
+	error: 'bg-red-50 text-red-700 border border-red-100',
 	critical: 'bg-red-100 text-red-900 border border-red-300 font-bold',
 };
 
 const ALL_LOGS: LogEntry[] = [
-	{ id: 1,  timestamp: '2024-05-16 09:01:12', severity: 'info',     user: 'aria.chen',    action: 'LOGIN',           resource: '/dashboard',         ip: '10.0.1.42'  },
-	{ id: 2,  timestamp: '2024-05-16 09:03:44', severity: 'info',     user: 'marcus.webb',  action: 'VIEW',            resource: '/reports/q1',        ip: '10.0.1.18'  },
-	{ id: 3,  timestamp: '2024-05-16 09:12:05', severity: 'warning',  user: 'aria.chen',    action: 'EXPORT',          resource: '/users/all',         ip: '10.0.1.42'  },
-	{ id: 4,  timestamp: '2024-05-16 09:15:30', severity: 'error',    user: 'unknown',      action: 'LOGIN_FAILED',    resource: '/auth',              ip: '203.0.113.7' },
-	{ id: 5,  timestamp: '2024-05-16 09:15:31', severity: 'error',    user: 'unknown',      action: 'LOGIN_FAILED',    resource: '/auth',              ip: '203.0.113.7' },
-	{ id: 6,  timestamp: '2024-05-16 09:15:32', severity: 'critical', user: 'unknown',      action: 'BRUTE_FORCE',     resource: '/auth',              ip: '203.0.113.7' },
-	{ id: 7,  timestamp: '2024-05-16 09:22:18', severity: 'info',     user: 'priya.kapoor', action: 'UPDATE',          resource: '/settings/theme',    ip: '10.0.1.55'  },
-	{ id: 8,  timestamp: '2024-05-16 09:31:00', severity: 'warning',  user: 'jordan.ellis', action: 'DELETE',          resource: '/reports/draft-4',   ip: '10.0.2.11'  },
-	{ id: 9,  timestamp: '2024-05-16 09:45:09', severity: 'info',     user: 'sam.rivera',   action: 'DEPLOY',          resource: '/infra/staging',     ip: '10.0.1.99'  },
-	{ id: 10, timestamp: '2024-05-16 10:02:44', severity: 'critical', user: 'system',       action: 'DB_CONN_LOST',    resource: '/db/primary',        ip: '10.0.0.1'   },
-	{ id: 11, timestamp: '2024-05-16 10:03:01', severity: 'critical', user: 'system',       action: 'FAILOVER',        resource: '/db/replica',        ip: '10.0.0.2'   },
-	{ id: 12, timestamp: '2024-05-16 10:15:22', severity: 'info',     user: 'aria.chen',    action: 'LOGOUT',          resource: '/auth',              ip: '10.0.1.42'  },
-	{ id: 13, timestamp: '2024-05-16 10:28:33', severity: 'warning',  user: 'taylor.brooks',action: 'PERMISSION_DENY', resource: '/admin/users',       ip: '10.0.1.77'  },
-	{ id: 14, timestamp: '2024-05-16 10:55:50', severity: 'error',    user: 'system',       action: 'DISK_FULL',       resource: '/storage/logs',      ip: '10.0.0.5'   },
-	{ id: 15, timestamp: '2024-05-16 11:10:04', severity: 'info',     user: 'marcus.webb',  action: 'LOGIN',           resource: '/dashboard',         ip: '10.0.1.18'  },
+	{
+		id: 1,
+		timestamp: '2024-05-16 09:01:12',
+		severity: 'info',
+		user: 'aria.chen',
+		action: 'LOGIN',
+		resource: '/dashboard',
+		ip: '10.0.1.42',
+	},
+	{
+		id: 2,
+		timestamp: '2024-05-16 09:03:44',
+		severity: 'info',
+		user: 'marcus.webb',
+		action: 'VIEW',
+		resource: '/reports/q1',
+		ip: '10.0.1.18',
+	},
+	{
+		id: 3,
+		timestamp: '2024-05-16 09:12:05',
+		severity: 'warning',
+		user: 'aria.chen',
+		action: 'EXPORT',
+		resource: '/users/all',
+		ip: '10.0.1.42',
+	},
+	{
+		id: 4,
+		timestamp: '2024-05-16 09:15:30',
+		severity: 'error',
+		user: 'unknown',
+		action: 'LOGIN_FAILED',
+		resource: '/auth',
+		ip: '203.0.113.7',
+	},
+	{
+		id: 5,
+		timestamp: '2024-05-16 09:15:31',
+		severity: 'error',
+		user: 'unknown',
+		action: 'LOGIN_FAILED',
+		resource: '/auth',
+		ip: '203.0.113.7',
+	},
+	{
+		id: 6,
+		timestamp: '2024-05-16 09:15:32',
+		severity: 'critical',
+		user: 'unknown',
+		action: 'BRUTE_FORCE',
+		resource: '/auth',
+		ip: '203.0.113.7',
+	},
+	{
+		id: 7,
+		timestamp: '2024-05-16 09:22:18',
+		severity: 'info',
+		user: 'priya.kapoor',
+		action: 'UPDATE',
+		resource: '/settings/theme',
+		ip: '10.0.1.55',
+	},
+	{
+		id: 8,
+		timestamp: '2024-05-16 09:31:00',
+		severity: 'warning',
+		user: 'jordan.ellis',
+		action: 'DELETE',
+		resource: '/reports/draft-4',
+		ip: '10.0.2.11',
+	},
+	{
+		id: 9,
+		timestamp: '2024-05-16 09:45:09',
+		severity: 'info',
+		user: 'sam.rivera',
+		action: 'DEPLOY',
+		resource: '/infra/staging',
+		ip: '10.0.1.99',
+	},
+	{
+		id: 10,
+		timestamp: '2024-05-16 10:02:44',
+		severity: 'critical',
+		user: 'system',
+		action: 'DB_CONN_LOST',
+		resource: '/db/primary',
+		ip: '10.0.0.1',
+	},
+	{
+		id: 11,
+		timestamp: '2024-05-16 10:03:01',
+		severity: 'critical',
+		user: 'system',
+		action: 'FAILOVER',
+		resource: '/db/replica',
+		ip: '10.0.0.2',
+	},
+	{
+		id: 12,
+		timestamp: '2024-05-16 10:15:22',
+		severity: 'info',
+		user: 'aria.chen',
+		action: 'LOGOUT',
+		resource: '/auth',
+		ip: '10.0.1.42',
+	},
+	{
+		id: 13,
+		timestamp: '2024-05-16 10:28:33',
+		severity: 'warning',
+		user: 'taylor.brooks',
+		action: 'PERMISSION_DENY',
+		resource: '/admin/users',
+		ip: '10.0.1.77',
+	},
+	{
+		id: 14,
+		timestamp: '2024-05-16 10:55:50',
+		severity: 'error',
+		user: 'system',
+		action: 'DISK_FULL',
+		resource: '/storage/logs',
+		ip: '10.0.0.5',
+	},
+	{
+		id: 15,
+		timestamp: '2024-05-16 11:10:04',
+		severity: 'info',
+		user: 'marcus.webb',
+		action: 'LOGIN',
+		resource: '/dashboard',
+		ip: '10.0.1.18',
+	},
 ];
 
 const SEVERITIES: ('all' | Severity)[] = ['all', 'info', 'warning', 'error', 'critical'];
 
 const conditionalRowStyles: ConditionalStyles<LogEntry>[] = [
 	{ when: r => r.severity === 'critical', style: { backgroundColor: '#fef2f2' } },
-	{ when: r => r.severity === 'error',    style: { backgroundColor: '#fff7f7' } },
+	{ when: r => r.severity === 'error', style: { backgroundColor: '#fff7f7' } },
 ];
 
 const columns: TableColumn<LogEntry>[] = [
@@ -53,16 +173,25 @@ const columns: TableColumn<LogEntry>[] = [
 		selector: r => r.severity,
 		sortable: true,
 		width: '110px',
-		cell: r => (
-			<span className={`text-xs px-2 py-0.5 rounded-full ${SEVERITY_STYLE[r.severity]}`}>
-				{r.severity}
-			</span>
-		),
-	},
-	{ id: 'user',     name: 'User',     selector: r => r.user,     sortable: true, width: '145px' },
-	{ id: 'action',   name: 'Action',   selector: r => r.action,   sortable: true, width: '145px', style: { fontFamily: 'monospace', fontSize: 12 } },
-	{ id: 'resource', name: 'Resource', selector: r => r.resource, grow: 1,        style: { fontFamily: 'monospace', fontSize: 12 } },
-	{ id: 'ip',       name: 'IP',       selector: r => r.ip,       width: '130px', style: { fontFamily: 'monospace', fontSize: 12 } },
+		cell: r => <span className={`text-xs px-2 py-0.5 rounded-full ${SEVERITY_STYLE[r.severity]}`}>{r.severity}</span>,
+	},
+	{ id: 'user', name: 'User', selector: r => r.user, sortable: true, width: '145px' },
+	{
+		id: 'action',
+		name: 'Action',
+		selector: r => r.action,
+		sortable: true,
+		width: '145px',
+		style: { fontFamily: 'monospace', fontSize: 12 },
+	},
+	{
+		id: 'resource',
+		name: 'Resource',
+		selector: r => r.resource,
+		grow: 1,
+		style: { fontFamily: 'monospace', fontSize: 12 },
+	},
+	{ id: 'ip', name: 'IP', selector: r => r.ip, width: '130px', style: { fontFamily: 'monospace', fontSize: 12 } },
 ];
 
 export default function AuditLogDemo() {

apps/docs/src/components/demos/ColumnPinningDemo.tsx

@@ -143,7 +143,9 @@ function PinPicker({
 }) {
 	const btn = (active: boolean) =>
 		`px-2.5 py-1 rounded-md text-xs font-medium border transition-colors ${
-			active ? 'bg-brand-600 text-white border-brand-600' : 'bg-white text-gray-600 border-gray-200 hover:border-gray-300'
+			active
+				? 'bg-brand-600 text-white border-brand-600'
+				: 'bg-white text-gray-600 border-gray-200 hover:border-gray-300'
 		}`;
 	return (
 		<div className="flex items-center gap-2">