행/셀 강조

이것은 테이블의 특색 기능으로, 실시간 데이터 업데이트 후 설정을 강조하여 사용자에게 알리는 데 사용됩니다.

인스턴스 메서드 setHighlightDimRow & setHighlightDimCell를 호출하면 행 또는 셀을 강조할 수 있습니다.

TIP

• 행/셀 강조, 기본값으로 animation(el.animate() 메서드로 애니메이션 트리거) 방식을 사용합니다. 커스텀 애니메이션을 원하시면 option 매개변수를 전달할 수 있습니다. Animation API 자세한 내용은 MDN, 호환성 MDN을 참고하세요.
• 강조 색상이 테마에 따라 실시간으로 변경되지 않습니다.
• 강조가 작동하지 않나요? props.rowKey를 지정했는지 확인하세요.

내장 강조 애니메이션

// 高亮行，可传入key数组，一次性高亮多行，利于性能
stkTableRef.current?.setHighlightDimRow(['id0']); 
// 高亮单元格
stkTableRef.current?.setHighlightDimCell('id1', 'age');

loading

전역 설정 강조

props.highlightConfig

type HighlightConfig = {
    /** 持续时间 */
    duration?: number;
    /** 高亮动画帧率 */
    fps?: number;
}

TIP

• 강조 프레임레이트를 낮추면 성능 향상에 도움이 됩니다.
• 애니메이션 프레임레이트를 지정하려면 Animation API의 easing: 'step(xx)' 구현을 참고하세요. (css animation-timing-function: step과 동일)

WARNING

커스텀 키프레임을 설정하면 HighlightConfig.fps가 失效됩니다!

animation api를 통해 커스텀 강조 애니메이션 정의

stkTableRef.current?.setHighlightDimRow([id], {
    keyframe: [
        { backgroundColor: '#1e4c99', transform: 'translateY(-30px) scale(0.6)', opacity: 0, easing: 'cubic-bezier(.11,.1,.03,.98)' },
        { backgroundColor: '#1B1B24', transform: 'translateY(0) scale(1)', opacity: 1 },
    ],
    duration: 1000,
});

stkTableRef.current?.setHighlightDimCell('id1', 'age', {
    keyframe: {
        color: ['#fff', '#C70000', '#fff'],
        transform: ['scale(1)', 'scale(1.1)', 'scale(1)'],
        boxShadow: ['unset', '0 0 10px #aaa', 'unset'],
        easing: 'cubic-bezier(.11,.1,.03,.98)',
    },
});

loading

css를 통해 커스텀 강조 애니메이션 정의

이 api는旧版动画实现方式입니다. css 애니메이션의 便捷함, 호환성 좋음, 이해하기 쉬움 등의优点으로 인해 여전히 이 api를 유지합니다.

stkTableRef.current?.setHighlightDimRow(['id1'], { 
    method: 'css',
    className: 'special-highlight-row',
    duration: 2000
});

WARNING

여기서 duration을 2000으로 설정하는 것은 애니메이션结束后요소에 있는 class를清除하기 위함이며, css 애니메이션 시간과 일치해야 합니다.

@keyframes my-highlight-row {
    from { background-color: #bd7201; }
}
.special-highlight-row {
    animation: my-highlight-row 2s linear;
}

loading

js를 통해 커스텀 강조 애니메이션 정의 (已废弃)

클릭하여 보기

stkTableRef?.setHighlightDimRow(['id1'], { 
    method: 'js',
    duration: 2000
});

사용을 권장하지 않습니다. 색상을手動計算해야 하고 성능이 좋지 않습니다. `d3-interpolate`에 의존합니다.

API

행 강조 setHighlightDimRow

/**
 * 高亮一行
 * @param rowKeyValues 行唯一键的数组
 * @param option.method css-使用css渲染，animation-使用animation api。默认animation
 * @param option.className 自定义css动画的class。
 * @param option.keyframe 如果自定义keyframe，则 highlightConfig.fps 将会失效。
 * @param option.duration 动画时长。method='css'状态下，用于移除class，如果传入了className则需要与自定义的动画时间一致。。
 */
setHighlightDimRow(rowKeyValues: UniqKey[], option: HighlightDimRowOption = {}): void;

셀 강조 setHighlightDimCell

/**
 * 高亮一个单元格。暂不支持虚拟滚动高亮状态记忆。
 * @param rowKeyValue 一行的key
 * @param colKeyValue 列key
 * @param options.method css-使用css渲染，animation-使用animation api。默认animation;
 * @param option.className 自定义css动画的class。
 * @param option.keyframe 如果自定义keyframe，则 highlightConfig.fps 将会失效。
 * @param option.duration 动画时长。method='css'状态下，用于移除class，如果传入了className则需要与自定义的动画时间一致。
 */
setHighlightDimCell(rowKeyValue: UniqKey, colKeyValue: string, option: HighlightDimCellOption = {}): void;

매개변수 타입

type HighlightDimBaseOption = {
    duration?: number;
    /**
     * 忽略不可见元素。为 true 时：
     * - 调用 setHighlightDimRow 时，若获取不到对应 DOM 则直接丢弃，不放入 store 循环计算；
     * - 若 store 中已存在该 key，也会被删除。
     * - 在循环计算过程中，若某行 DOM 已不存在，也会从 store 中删除，不再继续计算。
     */
    ignoreInvisible?: boolean;
};

type HighlightDimAnimationOption = HighlightDimBaseOption & {
    /** use Animation API */
    method: 'animation';
    /**
     * same as https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats
     */
    keyframe?: Parameters<Animatable['animate']>['0'];
};
type HighlightDimCssOption = HighlightDimBaseOption & {
    method: 'css';
    /** class name with css animation */
    className?: string;
    /** control delay time to remove className */
    duration?: number;
};

export type HighlightDimCellOption = HighlightDimBaseOption | HighlightDimAnimationOption | HighlightDimCssOption;
export type HighlightDimRowOption = HighlightDimBaseOption | HighlightDimAnimationOption | HighlightDimCssOption;