首頁 web前端 前端問答 react怎麼實現表頭固定

react怎麼實現表頭固定

Jan 09, 2023 am 10:25 AM
react

react實作表頭固定的方法:1、透過Ant Design的Table元件實作表格固定表頭;2、使用「rc-table」實現行動端表格頭固定;3、透過監聽div的onscroll事件,改變div的scrollLeft屬性。

react怎麼實現表頭固定

本教學操作環境:Windows10系統、react18.0.0版、Dell G3電腦。

react怎麼實現表頭固定?

React表格固定表頭/鎖定列

Ant Design的Table元件挺好用,固定表頭及鎖定列的功能不在話下,但Ant Design Mobile沒有Table組件。行動端要實現表格固定表頭及鎖定列的功能應該可以使用rc-table,當然也可以自己寫一個。

透過分析AntD的Table,可以看出固定表頭的表格是由上下兩個

標籤組成的,它們分別嵌套在div內,上面的是表頭,只包含< ;thead>,下邊是表格內容,只包含。應該是透過監聽下面div的onscroll事件,改變上面div的scrollLeft屬性,這樣在水平滾動表格時,表頭也會同步滾動。固定列是透過設定th及td的CSS屬性position為sticky並且設定left或right為0實現,同時設定z-index,讓鎖定的列始終顯示在上方。

原理整明白了,寫程式就比較容易了。

components/ScrollableTable/interface.tsx

import * as React from &#39;react&#39;;
export declare type AlignType = &#39;left&#39; | &#39;center&#39; | &#39;right&#39;;
export interface ColumnType {
  align?: AlignType;
  className?: string;
  dataKey?: string;
  fixed?: boolean;
  title?: React.ReactNode;
  width?: number;
  render?: (value: any, record: any, index: number) => React.ReactNode;
}
export interface TableProps {
  className?: string;
  style?: React.CSSProperties;
  columns?: ColumnType[];
  dataSource?: any[];
  width?: number;
  height?: number;
}

components/ScrollableTable/index.tsx

import React, { FunctionComponent, useRef } from &#39;react&#39;;
import { TableProps, ColumnType } from &#39;./interface&#39;;
import &#39;./index.less&#39;;
const ScrollableTable: FunctionComponent<any> = (props: TableProps) => {
  const style: React.CSSProperties = props.style || {};
  const maxHeight: string = props.width ? (props.height + &#39;px&#39;) : &#39;unset&#39;;
  const columns: ColumnType[] = props.columns || [];
  const dataSource: any[] = props.dataSource || [];
  let maxWidth: number = 0;
  if (props.width) style.width = props.width;
  if (columns.length === 0) {
    columns.push({
      dataKey: &#39;key&#39;
    });
  }
  columns.forEach((column: ColumnType) => {
    const width: number = column.width || 50;
    maxWidth += width;
  });
  const fixedColumns: number[][] = getFixedColumns(columns);
  const leftFixedColumns: number[] = fixedColumns[0];
  const rightFixedColumns: number[] = fixedColumns[1];
  const tableBody: any = useRef();
  const handleScroll = (target: any) => {
    const scrollLeft: number = target.scrollLeft;
    const tableHeaders: any = target.parentElement.getElementsByClassName(&#39;st-table-header&#39;);
    if (tableHeaders.length > 0) {
      tableHeaders[0].scrollLeft = scrollLeft;
    }
  };
  return (
    <div
      className={classNames(&#39;st-table-container&#39;, props.className)}
      style={style}
    >
      <div className="st-table-header">
        <table>
          <colgroup>
            {
              renderCols(columns)
            }
          </colgroup>
          <thead className="st-table-thead">
            <tr>
              {
                columns.map((column: ColumnType, index: number) => {
                  const align: any = column.align || undefined;
                  const title: React.ReactNode = column.title || &#39;&#39;;
                  const fixed: string = leftFixedColumns.includes(index) ? &#39;left&#39; : (rightFixedColumns.includes(index) ? &#39;right&#39; : &#39;&#39;);
                  const fixedClassName: string = fixed ? (&#39;st-table-cell-fix-&#39; + fixed) : &#39;&#39;;
                  return (
                    <th
                      key={index}
                      className={classNames(&#39;st-table-cell&#39;, fixedClassName, column.className)}
                      style={{textAlign: align}}
                    >
                      {title}
                    </th>
                  );
                })
              }
            </tr>
          </thead>
        </table>
      </div>
      <div
        ref={tableBody}
        className="st-table-body"
        style={{maxHeight: maxHeight}}
        onScroll={(e: any) => handleScroll(e.currentTarget)}
      >
        <table style={{width: maxWidth, minWidth: &#39;100%&#39;}}>
          <colgroup>
              {
                renderCols(columns)
              }
            </colgroup>
            <tbody className="st-table-tbody">
              {
                dataSource.map((record: any, index: number) => (
                  <tr key={index} className="st-table-row">
                    {
                      renderCells(columns, leftFixedColumns, rightFixedColumns, record, index)
                    }
                  </tr>
                ))
              }
            </tbody>
        </table>
      </div>
    </div>
  );
};
function classNames(...names: (string | undefined)[]) {
  const currentNames: string[] = [];
  names.forEach((name: (string | undefined)) => {
    if (name) currentNames.push(name);
  });
  return currentNames.join(&#39; &#39;);
}
function getFixedColumns(columns: ColumnType[]) {
  const total: number = columns.length;
  const leftFixedColumns: number[] = [];
  const rightFixedColumns: number[] = [];
  if (columns[0].fixed) {
    for (let i = 0; i < total; i++) {
      if (columns[i].fixed) {
        leftFixedColumns.push(i);
      } else {
        break;
      }
    }
  }
  if (columns[total - 1].fixed) {
    for (let i = total - 1; i >= 0; i--) {
      if (columns[i].fixed) {
        if (!leftFixedColumns.includes(i)) rightFixedColumns.push(i);
      } else {
        break;
      }
    }
  }
  return [leftFixedColumns, rightFixedColumns];
}
function renderCols(columns: ColumnType[]) {
  return columns.map((column: ColumnType, index: number) => {
    const width: number = column.width || 50;
    return (
      <col
        key={index}
        style={{width: width, minWidth: width}}
      />
    );
  });
}
function renderCells(columns: ColumnType[], leftFixedColumns: number[], rightFixedColumns: number[], record: any, index: number) {
  return columns.map((column: ColumnType, index: number) => {
    const align: any = column.align || undefined;
    const fixed: string = leftFixedColumns.includes(index) ? &#39;left&#39; : (rightFixedColumns.includes(index) ? &#39;right&#39; : &#39;&#39;);
    const className: string = classNames(&#39;st-table-cell&#39;, column.className, fixed ? (&#39;st-table-cell-fix-&#39; + fixed) : &#39;&#39;);
    const rawValue: any = (column.dataKey && column.dataKey in record) ? record[column.dataKey] : undefined;
    let value: any = undefined;
    if (column.render) {
      value = column.render(rawValue, record, index);
    } else {
      value = (rawValue === undefined || rawValue === null) ? &#39;&#39; : String(rawValue);
    }
    return (
      <td
        key={index}
        className={className}
        style={{textAlign: align}}
      >
        {value}
      </td>
    );
  });
}
export default ScrollableTable;

components/ScrollableTable/index.less

.st-table-container {
  border: 1px solid #f0f0f0;
  border-right: 0;
  border-bottom: 0;
  font-size: 14px;
  .st-table-header {
    border-right: 1px solid #f0f0f0;
    overflow: hidden;
    table {
      border-collapse: separate;
      border-spacing: 0;
      table-layout: fixed;
      width: 100%;
      thead.st-table-thead {
        tr {
          th.st-table-cell {
            background: #fafafa;
            border-bottom: 1px solid #f0f0f0;
            border-right: 1px solid #f0f0f0;
            color: rgba(0, 0, 0, .85);
            font-weight: 500;
            padding: 8px;
            text-align: left;
            &:last-child {
              border-right: 0;
            }
          }
        }
      }
    }
  }
  .st-table-body {
    overflow: auto scroll;
    border-bottom: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
    table {
      border-collapse: separate;
      border-spacing: 0;
      table-layout: fixed;
      tbody.st-table-tbody {
        tr.st-table-row {
          td.st-table-cell  {
            border-bottom: 1px solid #f0f0f0;
            border-right: 1px solid #f0f0f0;
            color: rgba(0, 0, 0, .65);
            padding: 8px;
            text-align: left;
            &:last-child {
              border-right: 0;
            }
          }
          &:last-child {
            td.st-table-cell  {
              border-bottom: 0;
            }
          }
        }
      }
    }
  }
  table {
    .st-table-cell {
      &.st-table-cell-fix-left {
        background: #fff;
        position: sticky;
        left: 0;
        z-index: 2;
      }
      &.st-table-cell-fix-right {
        background: #fff;
        position: sticky;
        right: 0;
        z-index: 2;
      }
    }
  }
}
登入後複製

然後可以這樣使用:

views/Test/index.tsx
import React, { FunctionComponent } from &#39;react&#39;;
import Page from &#39;../../components/Page&#39;;
import ScrollableTable from &#39;../../components/ScrollableTable&#39;;
import StoreProvider from &#39;../../stores/products/context&#39;;
import &#39;./index.less&#39;;
const Test: FunctionComponent<any> = (props: any) => {
  let records: any[] = [{
    id: 1,
    productName: &#39;淡泰&#39;,
    amount1: 198,
    amount2: 200,
    amount3: 205.5,
    currency: &#39;人民币&#39;,
    ca: &#39;Amy&#39;
  }, {
    productName: &#39;方润&#39;,
    amount1: 105.5,
    amount2: 100,
    amount3: 108,
    currency: &#39;港元&#39;,
    ca: &#39;Baby&#39;
  }, {
    productName: &#39;医疗基金-1&#39;,
    amount1: 153,
    amount2: 150,
    amount3: 155,
    currency: &#39;人民币&#39;,
    ca: &#39;Emily&#39;
  }, {
    productName: &#39;医疗基金-2&#39;,
    amount1: 302,
    amount2: 300,
    amount3: 290,
    currency: &#39;美元&#39;,
    ca: &#39;Baby&#39;
  }, {
    productName: &#39;医疗基金-3&#39;,
    amount1: 108.8,
    amount2: 100,
    amount3: 130,
    currency: &#39;人民币&#39;,
    ca: &#39;Amy&#39;
  }, {
    productName: &#39;医疗基金-4&#39;,
    amount1: 205,
    amount2: 200,
    amount3: 208,
    currency: &#39;美元&#39;,
    ca: &#39;吴丹&#39;
  }, {
    productName: &#39;医疗基金-5&#39;,
    amount1: 315.5,
    amount2: 300,
    amount3: 280,
    currency: &#39;人民币&#39;,
    ca: &#39;Baby&#39;
  }, {
    productName: &#39;医疗基金-6&#39;,
    amount1: 109,
    amount2: 95,
    amount3: 106,
    currency: &#39;人民币&#39;,
    ca: &#39;Emily&#39;
  }, {
    productName: &#39;恒大私募债&#39;,
    amount1: 213,
    amount2: 200,
    amount3: 208,
    currency: &#39;港元&#39;,
    ca: &#39;吴丹&#39;
  }];
  const totalRecord: any = {
    productName: &#39;合计&#39;,
    amount1: {},
    amount2: {},
    amount3: {}
  };
  records.forEach((record: any) => {
    const currency: string = record.currency;
    [&#39;amount1&#39;, &#39;amount2&#39;, &#39;amount3&#39;].forEach((key: string) => {
      const value: any = totalRecord[key];
      if (!(currency in value)) value[currency] = 0;
      value[currency] += record[key];
    });
  });
  records.push(totalRecord);
  const columns: any[] = [{
    dataKey: &#39;productName&#39;,
    title: &#39;产品名称&#39;,
    width: 90,
    fixed: true
  }, {
    dataKey: &#39;amount1&#39;,
    title: <React.Fragment>上周缴款金额<br/>(万)</React.Fragment>,
    width: 140,
    align: &#39;center&#39;,
    className: &#39;amount&#39;,
    render: calculateTotal
  }, {
    dataKey: &#39;amount2&#39;,
    title: <React.Fragment>上周预约金额<br/>(万)</React.Fragment>,
    width: 140,
    align: &#39;center&#39;,
    className: &#39;amount&#39;,
    render: calculateTotal
  }, {
    dataKey: &#39;amount3&#39;,
    title: <React.Fragment>待本周跟进金额<br/>(万)</React.Fragment>,
    width: 140,
    align: &#39;center&#39;,
    className: &#39;amount&#39;,
    render: calculateTotal
  }, {
    dataKey: &#39;currency&#39;,
    title: &#39;币种&#39;,
    width: 80
  }, {
    dataKey: &#39;ca&#39;,
    title: &#39;CA&#39;,
    width: 80
  }];
  return (
    <StoreProvider>
      <Page
        {...props}
        title="销售统计"
        className="test"
      >
        <div style={{padding: 15}}>
          <ScrollableTable
            width={window.innerWidth - 30}
            height={196}
            columns={columns}
            dataSource={records}
          />
        </div>
      </Page>
    </StoreProvider>
  );
};
function calculateTotal(value: any) {
  if (value instanceof Object) {
    const keys: any[] = Object.keys(value);
    return (
      <React.Fragment>
        {
          keys.map((key: string, index: number) => (
            <span key={index}>
              {`${value[key].toFixed(2)}万${key}`}
            </span>
          ))
        }
      </React.Fragment>
    )
  }
  return value.toFixed(2);
}
export default Test;

views/Test/index.less

.st-table-container {
  .st-table-body {
    td.st-table-cell.amount {
      padding-right: 20px !important;
      text-align: right !important;
      span {
        display: block;
      }
    }
  }
}
登入後複製

推薦學習:《react影片教學

以上是react怎麼實現表頭固定的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1664
14
CakePHP 教程
1423
52
Laravel 教程
1318
25
PHP教程
1269
29
C# 教程
1248
24
如何利用React和RabbitMQ建立可靠的訊息應用 如何利用React和RabbitMQ建立可靠的訊息應用 Sep 28, 2023 pm 08:24 PM

如何利用React和RabbitMQ建立可靠的訊息傳遞應用程式引言:現代化的應用程式需要支援可靠的訊息傳遞,以實現即時更新和資料同步等功能。 React是一種流行的JavaScript庫,用於建立使用者介面,而RabbitMQ是一種可靠的訊息傳遞中間件。本文將介紹如何結合React和RabbitMQ建立可靠的訊息傳遞應用,並提供具體的程式碼範例。 RabbitMQ概述:

React Router使用指南:如何實現前端路由控制 React Router使用指南:如何實現前端路由控制 Sep 29, 2023 pm 05:45 PM

ReactRouter使用指南:如何實現前端路由控制隨著單頁應用的流行,前端路由成為了一個不可忽視的重要部分。 ReactRouter作為React生態系統中最受歡迎的路由庫,提供了豐富的功能和易用的API,使得前端路由的實作變得非常簡單和靈活。本文將介紹ReactRouter的使用方法,並提供一些具體的程式碼範例。安裝ReactRouter首先,我們需要

PHP、Vue和React:如何選擇最適合的前端框架? PHP、Vue和React:如何選擇最適合的前端框架? Mar 15, 2024 pm 05:48 PM

PHP、Vue和React:如何選擇最適合的前端框架?隨著互聯網技術的不斷發展,前端框架在Web開發中起著至關重要的作用。 PHP、Vue和React作為三種代表性的前端框架,每一種都具有其獨特的特徵和優勢。在選擇使用哪種前端框架時,開發人員需要根據專案需求、團隊技能和個人偏好做出明智的決策。本文將透過比較PHP、Vue和React這三種前端框架的特徵和使

Java框架與前端React框架的整合 Java框架與前端React框架的整合 Jun 01, 2024 pm 03:16 PM

Java框架與React框架的整合:步驟:設定後端Java框架。建立專案結構。配置建置工具。建立React應用程式。編寫RESTAPI端點。配置通訊機制。實戰案例(SpringBoot+React):Java程式碼:定義RESTfulAPI控制器。 React程式碼:取得並顯示API回傳的資料。

如何利用React開發一個響應式的後台管理系統 如何利用React開發一個響應式的後台管理系統 Sep 28, 2023 pm 04:55 PM

如何利用React開發一個響應式的後台管理系統隨著互聯網的快速發展,越來越多的企業和組織需要一個高效、靈活、易於管理的後台管理系統來處理日常的操作事務。 React作為目前最受歡迎的JavaScript庫之一,提供了一種簡潔、高效和可維護的方式來建立使用者介面。本文將介紹如何利用React開發一個響應式的後台管理系統,並給出具體的程式碼範例。建立React專案首先

vue.js vs.反應:特定於項目的考慮因素 vue.js vs.反應:特定於項目的考慮因素 Apr 09, 2025 am 12:01 AM

Vue.js適合中小型項目和快速迭代,React適用於大型複雜應用。 1)Vue.js易於上手,適用於團隊經驗不足或項目規模較小的情況。 2)React的生態系統更豐富,適合有高性能需求和復雜功能需求的項目。

React在HTML中的作用:增強用戶體驗 React在HTML中的作用:增強用戶體驗 Apr 09, 2025 am 12:11 AM

React通過JSX與HTML結合,提升用戶體驗。 1)JSX嵌入HTML,使開發更直觀。 2)虛擬DOM機制優化性能,減少DOM操作。 3)組件化管理UI,提高可維護性。 4)狀態管理和事件處理增強交互性。

react有哪些閉包 react有哪些閉包 Oct 27, 2023 pm 03:11 PM

react有事件處理函數、useEffect和useCallback、高階元件等等閉包。詳細介紹:1、事件處理函數閉包:在React中,當我們在元件中定義事件處理函數時,函數會形成一個閉包,可以存取元件作用域內的狀態和屬性。這樣可以在事件處理函數中使用元件的狀態和屬性,實現互動邏輯;2、useEffect和useCallback中的閉包等等。

See all articles