Add click-to-lock row highlighting
Clicking a row locks an orange highlight (#fff7e6) across the whole row including fixed columns; clicking the same row unlocks, clicking another switches. Lock resets on search/clear. Highlight survives horizontal scroll since rowClassName applies to all row fragments. Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -6,3 +6,8 @@ body {
|
|||||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||||||
"Helvetica Neue", Arial, sans-serif;
|
"Helvetica Neue", Arial, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 行高亮:点击锁定的整行(覆盖 antd 单元格背景,含固定列) */
|
||||||
|
.ant-table-tbody > tr.row-locked > td {
|
||||||
|
background: #fff7e6 !important;
|
||||||
|
}
|
||||||
|
|||||||
@@ -31,13 +31,10 @@ import {
|
|||||||
arrayMove,
|
arrayMove,
|
||||||
} from "@dnd-kit/sortable";
|
} from "@dnd-kit/sortable";
|
||||||
import { CSS } from "@dnd-kit/utilities";
|
import { CSS } from "@dnd-kit/utilities";
|
||||||
|
import { nextLockedRow, type DataRow } from "./table-filters";
|
||||||
|
|
||||||
const { Title, Text } = Typography;
|
const { Title, Text } = Typography;
|
||||||
|
|
||||||
interface DataRow {
|
|
||||||
[key: string]: string | number | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ColumnConfig {
|
interface ColumnConfig {
|
||||||
key: string;
|
key: string;
|
||||||
visible: boolean;
|
visible: boolean;
|
||||||
@@ -450,6 +447,7 @@ export default function Home() {
|
|||||||
const [columnConfig, setColumnConfig] = useState<ColumnConfig[]>(loadConfig);
|
const [columnConfig, setColumnConfig] = useState<ColumnConfig[]>(loadConfig);
|
||||||
const [modalOpen, setModalOpen] = useState(false);
|
const [modalOpen, setModalOpen] = useState(false);
|
||||||
const [exporting, setExporting] = useState(false);
|
const [exporting, setExporting] = useState(false);
|
||||||
|
const [lockedRowKey, setLockedRowKey] = useState<string | null>(null);
|
||||||
|
|
||||||
// Persist config
|
// Persist config
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -471,6 +469,7 @@ export default function Home() {
|
|||||||
setColumns(json.columns);
|
setColumns(json.columns);
|
||||||
setData(json.data);
|
setData(json.data);
|
||||||
setSearched(true);
|
setSearched(true);
|
||||||
|
setLockedRowKey(null);
|
||||||
} catch {
|
} catch {
|
||||||
setError("网络请求失败");
|
setError("网络请求失败");
|
||||||
} finally {
|
} finally {
|
||||||
@@ -483,6 +482,7 @@ export default function Home() {
|
|||||||
setColumns([]);
|
setColumns([]);
|
||||||
setSearched(false);
|
setSearched(false);
|
||||||
setError(null);
|
setError(null);
|
||||||
|
setLockedRowKey(null);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const handleExport = useCallback(async () => {
|
const handleExport = useCallback(async () => {
|
||||||
@@ -582,6 +582,13 @@ export default function Home() {
|
|||||||
columns={tableColumns}
|
columns={tableColumns}
|
||||||
dataSource={data}
|
dataSource={data}
|
||||||
rowKey="ID"
|
rowKey="ID"
|
||||||
|
onRow={(record) => ({
|
||||||
|
onClick: () =>
|
||||||
|
setLockedRowKey((prev) => nextLockedRow(prev, String(record.ID))),
|
||||||
|
})}
|
||||||
|
rowClassName={(record) =>
|
||||||
|
String(record.ID) === lockedRowKey ? "row-locked" : ""
|
||||||
|
}
|
||||||
bordered
|
bordered
|
||||||
size="small"
|
size="small"
|
||||||
pagination={false}
|
pagination={false}
|
||||||
|
|||||||
Reference in New Issue
Block a user