Phản hồi FixedDataTable kích thước hàng/ô phản hồi

Question

Khi xác định Bảng dữ liệu cố định, bạn chỉ định chiều cao hàng bằng cách sử dụng thuộc tính rowHeight. Nhưng bằng cách đặt giá trị tĩnh (ví dụ: cao 50 pixel) nếu nội dung của số đó cell quá lớn, nó sẽ bị cắt vì chiều cao được đặt rõ ràng. Tôi thấy rằng có một hàm gọi lại rowHeightGetter nhưng các đối số cho hàm đó dường như không có bất kỳ mức độ liên quan nào (có lẽ nó có thể là hàng mà nó nhận được? Loại ý nghĩa nào nhưng không có gì về dữ liệu cho cột cụ thể hoặc cell).

Vì vậy, tôi tò mò, có cách nào để làm cho nó để các cell là (thậm chí phần nào) đáp ứng với dữ liệu mà nó chứa?

var Table = FixedDataTable.Table, 
    Column = FixedDataTable.Column, 
    Cell = FixedDataTable.Cell; 

var rows = [ 
    ['a1', 'b1', 'c1'], 
    ['a2', 'b2', 'c2'], 
    ['a3', 'b3', 'c3'], 
    // .... and more 
]; 

ReactDOM.render(
    <Table 
    rowHeight={50} 
    rowsCount={rows.length} 
    width={500} 
    height={500} 
    headerHeight={50}> 
    <Column 
     header={<Cell>Col 1</Cell>} 
     cell={<Cell>Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content </Cell>} 
     width={200} 
    /> 
    <Column 
     header={<Cell>Col 3</Cell>} 
     cell={({rowIndex, ...props}) => (
     <Cell {...props}> 
      Data for column 3: {rows[rowIndex][2]} 
     </Cell> 
    )} 
     width={200} 
    /> 
    </Table>, 
    document.getElementById('CustomDataTable1') 
); 

Đây là ví dụ đơn giản nhưng nếu/khi bạn chạy, bạn sẽ thấy nội dung của ô đầu tiên bị cắt và bạn không được phép xem nội dung bên trong.

Tôi đã đập đầu vào tường về vấn đề này trong một thời gian và không tìm thấy bất kỳ thứ gì sẽ giúp tôi. Tôi bắt đầu nghĩ rằng tôi cần phải sử dụng cái gì khác. Có ai có thể đưa ra lời khuyên hay lời khuyên nào không?

thnx, Christoph

Answer 1

Variable, chiều cao dòng render-content-based, di chuyển vô hạn và hiệu suất hợp lý là yêu cầu khó khăn để đáp ứng cùng một lúc. Bảng dữ liệu cố định được tối ưu hóa để hiển thị nhanh và cuộn các bảng lớn. Để hỗ trợ điều này một cách hiệu quả, cần biết mỗi hàng trong bộ dữ liệu sẽ cao bao nhiêu trước khi nó hiển thị (và trường hợp lý tưởng và nhanh nhất là nơi mỗi hàng có cùng độ cao được xác định trước).

Vì vậy, nếu bạn thực sự cần cuộn vô hạn, bạn cần phải tìm ra mức độ lớn của mỗi hàng, chỉ từ chỉ mục. Tôi đoán bạn có thể triển khai phương thức này bằng cách hiển thị hàng tới bảng html đơn giản ngoài màn hình, theo cách thủ công và đo mức độ cao (và lưu vào bộ nhớ cache kết quả) hoặc có thể sử dụng thuật toán đơn giản hơn (ví dụ: đoán chiều cao yêu cầu hợp lý) về nội dung). Cách tiếp cận trước đây không có khả năng hoạt động tốt, mặc dù tôi chưa thử.

Nếu bạn không cần cuộn vô hạn, hãy thả Bảng dữ liệu cố định và chỉ hiển thị bảng HTML đơn giản <>, sẽ xử lý chiều cao hàng nội dung của bạn tốt (bằng cách sử dụng CSS phù hợp để đặt nó ra theo ý bạn muốn).

Tùy chọn cuối cùng là triển khai thành phần bảng cuộn vô hạn tự điều chỉnh tự động điều chỉnh vị trí cuộn tự động dựa trên chiều cao của mỗi hàng sau khi nó được hiển thị. Chúc may mắn (Tôi nghĩ điều này là có thể!)

Answer 2

Trong tác vụ này link, tác giả đề nghị kiểm tra chiều cao hàng thông qua React.getDOMNode(). OuterHeight on componentDidMount event. Có lẽ bạn có thể kết hợp thông tin này với callback rowHeightGetter để điều chỉnh chiều cao hàng tương ứng.

Có ví dụ về cách sử dụng gọi lại rowHeightGetter here.