ดาวน์โหลด react grid table - react grid table ดาวน์โหลดซอร์สโค้ด

ตารางปฏิกิริยากริด

ตารางโมดูลาร์ที่ใช้เค้าโครงตาราง CSS ได้รับการปรับให้เหมาะสมเพื่อการกำหนดค่าที่รวดเร็วและการปรับแต่งเชิงลึก

คุณสมบัติที่รองรับ:

การสนับสนุนแบบอะซิงโครนัส
เรียงตามคอลัมน์
ปรับขนาดคอลัมน์
เรียงลำดับคอลัมน์ใหม่
ค้นหาด้วยไฮไลต์
การแบ่งหน้า
การเลือกแถว
การแก้ไขแถวแบบอินไลน์
การปักหมุดคอลัมน์ (กำหนดค่าไว้ล่วงหน้า)
การจัดการการมองเห็นคอลัมน์
เลื่อนเสมือน
ส่วนหัวเหนียว
ความสูงของแถวแบบไดนามิก

การสาธิตสด

สาธิต

ติดตั้ง

npm i @nadavshaar/react-grid-table

การใช้งาน

ตามค่าเริ่มต้น ตารางจะมีคุณลักษณะครบถ้วนแม้ว่าจะมีเพียงการกำหนดค่าพื้นฐานของแถวและคอลัมน์ก็ตาม

ตัวอย่าง:

 import React from "react" ;
import GridTable from '@nadavshaar/react-grid-table' ;

// custom cell component
const Username = ( { tableManager , value , field , data , column , colIndex , rowIndex } ) => {
    return (
        < div className = 'rgt-cell-inner' style = { { display : 'flex' , alignItems : 'center' , overflow : 'hidden' } } >
            < img src = { data . avatar } alt = "user avatar" / >
            < span className = 'rgt-text-truncate' style = { { marginLeft : 10 } } > { value } < / span >
        < / div >
    )
}

const rows = [
    { 
        "id" : 1 , 
        "username" : "wotham0" , 
        "gender" : "Male" , 
        "last_visited" : "12/08/2019" , 
        "test" : { "x" : 1 , "y" : 2 } , 
        "avatar" : "https://robohash.org/atquenihillaboriosam.bmp?size=32x32&set=set1"
    } ,
    { 
        "id" : 2 , 
        "username" : "dbraddon2" , 
        "gender" : "Female" , 
        "last_visited" : "16/07/2018" , 
        "test" : { "x" : 3 , "y" : 4 } , 
        "avatar" : "https://robohash.org/etsedex.bmp?size=32x32&set=set1"
    } ,
    { 
        "id" : 3 , 
        "username" : "dridett3" , 
        "gender" : "Male" , 
        "last_visited" : "20/11/2016" , 
        "test" : { "x" : 5 , "y" : 8 } , 
        "avatar" : "https://robohash.org/inimpeditquam.bmp?size=32x32&set=set1"
    } ,
    { 
        "id" : 4 , 
        "username" : "gdefty6" , 
        "gender" : "Female" , 
        "last_visited" : "03/08/2019" , 
        "test" : { "x" : 7 , "y" : 4 } , 
        "avatar" : "https://robohash.org/nobisducimussaepe.bmp?size=32x32&set=set1"
    } ,
    { 
        "id" : 5 , 
        "username" : "hbeyer9" , 
        "gender" : "Male" , 
        "last_visited" : "10/10/2016" , 
        "test" : { "x" : 2 , "y" : 2 } , 
        "avatar" : "https://robohash.org/etconsequatureaque.jpg?size=32x32&set=set1"
    }
] ;

const columns = [
    {
        id : 1 , 
        field : 'username' , 
        label : 'Username' ,
        cellRenderer : Username ,
    } , 
    {
        id : 2 , 
        field : 'gender' , 
        label : 'Gender' ,
    } ,
    {
        id : 3 , 
        field : 'last_visited' , 
        label : 'Last Visited' ,
        sort : ( { a , b , isAscending } ) => {
            let aa = a . split ( '/' ) . reverse ( ) . join ( ) ,
            bb = b . split ( '/' ) . reverse ( ) . join ( ) ;
            return aa < bb ? isAscending ? - 1 : 1 : ( aa > bb ? isAscending ? 1 : - 1 : 0 ) ;
        }
    } ,
    {
        id : 4 , 
        field : 'test' , 
        label : 'Score' ,
        getValue : ( { value } ) => value . x + value . y
    }
] ;

const MyAwesomeTable = ( ) => < GridTable columns = { columns } rows = { rows } / > ;

export default MyAwesomeTable ;

เอกสาร

สารบัญ

ส่วนประกอบหลัก
อุปกรณ์ประกอบฉาก
อุปกรณ์ประกอบฉากการกำหนดค่า
อุปกรณ์ประกอบฉากเหตุการณ์
อุปกรณ์ประกอบฉากแบบอะซิงก์
เสา columns
คอลัมน์ช่อง checkbox
เสา rows
components
เสาพร็อ additionalProps
API tableManager
วิธีการ: ซิงค์/อะซิงค์
วิธีการ: การแก้ไขแถว
ฮาวทู: จัดแต่งทรงผม

สนับสนุนแพ็คเกจนี้

ส่วนประกอบหลัก

HEADER (ไม่บังคับ | ปรับแต่งได้): การจัดการการค้นหาและการมองเห็นคอลัมน์

TABLE-HEADER: จัดเรียง ปรับขนาด และจัดเรียงคอลัมน์ใหม่

TABLE-BODY: การแสดงข้อมูล / ตัวโหลด / ไม่มีผลลัพธ์ การแก้ไขแถวและการเลือกแถว

FOOTER (ไม่บังคับ | ปรับแต่งได้): ข้อมูลแถว, แถวต่อหน้า & การแบ่งหน้า

อุปกรณ์ประกอบฉาก

ชื่อ	พิมพ์	คำอธิบาย	ค่าเริ่มต้น
คอลัมน์*	อาร์เรย์ของวัตถุ	การกำหนดค่าคอลัมน์ (รายละเอียด)	-
แถว	อาร์เรย์ของวัตถุ	ข้อมูลแถว (รายละเอียด)	-
เลือกRowsIds	อาร์เรย์ของรหัส	รหัสของแถวที่เลือกทั้งหมด (รายละเอียด)	-
ข้อความค้นหา	เชือก	ข้อความสำหรับการค้นหา	-
getIsRowSelectable	การทำงาน	ฟังก์ชันโทรกลับที่ส่งคืนว่าควรเลือกหรือปิดใช้งานการเลือกแถวสำหรับแถวปัจจุบัน	`row => true`
getIsRowEditable	การทำงาน	ฟังก์ชันโทรกลับที่ส่งคืนว่าควรอนุญาตการแก้ไขแถวสำหรับแถวปัจจุบันหรือไม่	`row => true`
แก้ไขRowId	ใดๆ	รหัสของแถวที่ควรเปลี่ยนเป็นโหมดแก้ไขแบบอินไลน์ (รายละเอียดเพิ่มเติมเกี่ยวกับการแก้ไขแถว)	โมฆะ
หน้าหนังสือ	ตัวเลข	หมายเลขหน้าปัจจุบัน	1
ขนาดหน้า	ตัวเลข	ขนาดหน้าที่เลือก	20
เรียงลำดับ	วัตถุ	เรียงลำดับการกำหนดค่า ยอมรับ `colId` สำหรับ id ของคอลัมน์ที่ควรเรียงลำดับ และ `isAsc` เพื่อกำหนดทิศทางการเรียงลำดับ ตัวอย่าง: `{ colId: 'some-column-id', isAsc: true }` หากต้องการยกเลิกการเรียงลำดับ เพียงแค่ส่ง `colId` เป็น `null`	-
กำลังโหลด	บูลีน	ไม่ว่าจะแสดงตัวโหลดหรือไม่	เท็จ

อุปกรณ์ประกอบฉากการกำหนดค่า

ชื่อ	พิมพ์	คำอธิบาย	ค่าเริ่มต้น
แถว IdField	เชือก	ชื่อของฟิลด์ในข้อมูลของแถวที่ควรใช้เป็นตัวระบุแถว - จะต้อง ไม่ซ้ำกัน	'รหัส'
minColumnResizeWidth	ตัวเลข	ความกว้างขั้นต่ำสำหรับคอลัมน์ทั้งหมดขณะปรับขนาด (ใช้ไม่ได้กับคอลัมน์ 'ช่องทำเครื่องหมาย')	70
minSearchChars	ตัวเลข	อักขระขั้นต่ำที่ต้องพิมพ์ก่อนที่จะใช้การค้นหา	2
isHeaderSticky	บูลีน	ไม่ว่าเซลล์ส่วนหัวของตารางจะติดอยู่ด้านบนเมื่อเลื่อนหรือไม่	จริง
เป็นเลขหน้า	บูลีน	กำหนดว่าควรแสดงตัวควบคุมการแบ่งหน้าในส่วนท้ายหรือไม่ และข้อมูลแถวควรแบ่งออกเป็นหน้าหรือไม่	จริง
เปิดใช้งานColumnsReorder	บูลีน	ว่าจะอนุญาตให้ลากและวางคอลัมน์เพื่อเปลี่ยนตำแหน่งหรือไม่	จริง
เน้นค้นหา	บูลีน	ไม่ว่าจะเน้นข้อความค้นหาหรือไม่	จริง
แสดงการค้นหา	บูลีน	ว่าจะแสดงองค์ประกอบการค้นหาในส่วนหัวหรือไม่	จริง
แสดงข้อมูลแถว	บูลีน	ว่าจะแสดงองค์ประกอบข้อมูลแถวหรือไม่ (อยู่ที่ด้านซ้ายของส่วนท้าย)	จริง
showColumnVisibilityManager	บูลีน	ว่าจะแสดงปุ่มการจัดการการมองเห็นคอลัมน์หรือไม่ (อยู่ที่มุมขวาบนของส่วนหัว)	จริง
ขนาดหน้า	อาร์เรย์ของตัวเลข	ตัวเลือกขนาดหน้า	[20, 50, 100]
คือVirtualScroll	บูลีน	ไม่ว่าจะแสดงรายการในการเลื่อนเสมือนเพื่อปรับปรุงประสิทธิภาพหรือไม่ (มีประโยชน์เมื่อคุณมีแถวจำนวนมากในหนึ่งหน้า)	จริง
เลือกโหมดทั้งหมด	เชือก	ควบคุมประเภทของ "การเลือกทั้งหมด" ตัวเลือกที่ใช้ได้คือ `page` เลือก/ยกเลิกการเลือกเฉพาะแถวในหน้าปัจจุบัน หรือ `all` เพื่อเลือก/ยกเลิกการเลือกแถวทั้งหมดในทุกหน้า หากใช้โฟลว์อะซิงก์ ตัวเลือก `all` จะเลือกแถว ที่มีอยู่ ทั้งหมด และตัวเลือก `page` ที่รวมกับ `batchSize` จะเลือก/ยกเลิกการเลือกแถว ที่มีอยู่ ทั้งหมดในเพจ	'หน้าหนังสือ'
ไอคอน	วัตถุของโหนด	การกำหนดค่าไอคอนแบบกำหนดเอง	{ sortAscending, sortDescending, clearSelection, การมองเห็นคอลัมน์, การค้นหา, ตัวโหลด }
ข้อความ	วัตถุ	กำหนดค่าสำหรับข้อความ UI ทั้งหมด ซึ่งมีประโยชน์สำหรับการแปลหรือปรับแต่งข้อความ	{ ค้นหา: 'ค้นหา:', TotalRows: 'แถวทั้งหมด:', แถว: 'แถว:', เลือกแล้ว: 'เลือกแล้ว', rowsPerPage: 'แถวต่อหน้า:', หน้า: 'หน้า:', จาก: 'ของ' , ก่อนหน้า: 'ก่อนหน้า' ถัดไป: 'ถัดไป' การมองเห็นคอลัมน์: 'การมองเห็นคอลัมน์' }
ส่วนประกอบ	วัตถุ	เสานี้ช่วยให้คุณสามารถแทนที่ส่วนประกอบภายในด้วยส่วนประกอบที่คุณกำหนดเองได้ (ดูรายการส่วนประกอบที่รองรับทั้งหมด)	{ ส่วนประกอบเริ่มต้น }
อุปกรณ์ประกอบฉากเพิ่มเติม	วัตถุ	เสานี้ช่วยให้คุณสามารถส่งอุปกรณ์ประกอบฉากไปยังส่วนประกอบ/โมดูลของตารางได้ (ดูรายการอุปกรณ์ประกอบฉากเพิ่มเติมที่รองรับทั้งหมด)	`additionalProps={{ header: { ... } }}`

อุปกรณ์ประกอบฉากเหตุการณ์

ชื่อ	พิมพ์	คำอธิบาย	การใช้งาน
บนคอลัมน์เปลี่ยน	การทำงาน	ทริกเกอร์เมื่อ `columns` มีการเปลี่ยนแปลง	`columns => { ... }`
บน SelectedRowsChange	การทำงาน	ทริกเกอร์เมื่อมีการเปลี่ยนการเลือกแถว	`selectedRowsIds => { ... }`
บนเปลี่ยนหน้า	การทำงาน	ทริกเกอร์เมื่อมีการเปลี่ยนหน้า	`nextPage => { ... }`
onPageSizeChange	การทำงาน	ทริกเกอร์เมื่อขนาดหน้ามีการเปลี่ยนแปลง	`newPageSize => { ... }`
บนSearchTextChange	การทำงาน	ทริกเกอร์เมื่อข้อความค้นหาเปลี่ยนแปลง	`searchText => { ... }`
onSortChange	การทำงาน	ทริกเกอร์เมื่อการเรียงลำดับเปลี่ยนไป	`({colId, isAsc}) => { ... }`
บนRowClick	การทำงาน	ทริกเกอร์เมื่อมีการคลิกแถว	`({ rowIndex, data, column, isEdit, event }, tableManager) => { ... }`
onEditRowIdChange	การทำงาน	ทริกเกอร์เมื่อ `rowEditId` เปลี่ยนไป	`rowEditId => { ... }`
บนโหลด	การทำงาน	ทริกเกอร์เมื่อมีการเตรียมใช้งาน `tableManager` (รายละเอียด)	`tableManager => { ... }`
onColumnResizeStart	การทำงาน	ทริกเกอร์เมื่อเริ่มต้นการปรับขนาดคอลัมน์	`({event, target, column}) => { ... }`
บนคอลัมน์ปรับขนาด	การทำงาน	ทริกเกอร์เมื่อมีการปรับขนาดคอลัมน์	`({event, target, column}) => { ... }`
บนคอลัมน์ปรับขนาดสิ้นสุด	การทำงาน	ทริกเกอร์เมื่อการปรับขนาดคอลัมน์สิ้นสุด	`({event, target, column}) => { ... }`
onColumnReorderStart	การทำงาน	ทริกเกอร์ในการลากคอลัมน์ ข้อมูลการเรียงลำดับที่จัดทำโดย react-sortable-hoc โดยใช้ `onSortStart` prop	`(sortData, tableManager) => { ... }`
บนคอลัมน์เรียงลำดับใหม่สิ้นสุด	การทำงาน	ทริกเกอร์เมื่อคอลัมน์หล่น และเฉพาะเมื่อคอลัมน์เปลี่ยนตำแหน่งเท่านั้น ข้อมูลการเรียงลำดับที่จัดทำโดย react-sortable-hoc โดยใช้ `onSortEnd` prop	`(sortData, tableManager) => { ... }`

อุปกรณ์ประกอบฉากแบบอะซิงก์

ชื่อ	พิมพ์	คำอธิบาย	การใช้งาน/ค่าเริ่มต้น
onRowsRequest	การทำงาน	ทริกเกอร์เมื่อควรดึงแถวใหม่	ดูตัวอย่าง
บนRowsChange	การทำงาน	ทริกเกอร์เมื่อแถวมีการเปลี่ยนแปลง	ดูตัวอย่าง
บนTotalRowsChange	การทำงาน	ทริกเกอร์เมื่อจำนวนแถวทั้งหมดมีการเปลี่ยนแปลง	ดูตัวอย่าง
บนRowsรีเซ็ต	การทำงาน	ทริกเกอร์เมื่อจำเป็นต้องรีเซ็ตแถวที่สะสม (เมื่อค้นหาหรือเรียงลำดับ)	ดูตัวอย่าง
ขนาดแบตช์	ตัวเลข	กำหนดจำนวนแถวที่จะถูกร้องขอโดย `onRowsRequest` prop	ขนาดหน้าของตาราง
ขอDebounceTimeout	ตัวเลข	กำหนดระยะเวลาดีเด้งเพื่อทริกเกอร์เสา `onRowsRequest`	300
แถวทั้งหมด	ตัวเลข	จำนวนแถวทั้งหมด	-

อุปกรณ์ประกอบฉาก-รายละเอียด

คอลัมน์

ประเภท: อาร์เรย์ของวัตถุ

เสานี้จะกำหนดการกำหนดค่าคอลัมน์

แต่ละคอลัมน์ (ยกเว้นคอลัมน์ 'ช่องทำเครื่องหมาย') รองรับคุณสมบัติต่อไปนี้:

ชื่อ	พิมพ์	คำอธิบาย	ค่าเริ่มต้น
รหัส*	ใดๆ	ตัวระบุที่ไม่ซ้ำกันสำหรับคอลัมน์ การตั้งค่าเป็น 'ช่องทำเครื่องหมาย' จะสร้างคอลัมน์การเลือกแถว (รายละเอียดเพิ่มเติมเกี่ยวกับคอลัมน์ช่องทำเครื่องหมาย)	-
สนาม	เชือก	ชื่อของฟิลด์เช่นเดียวกับข้อมูลแถว	-
ฉลาก	เชือก	ป้ายกำกับที่จะแสดงในเซลล์ส่วนหัว	คุณสมบัติ `field`
ตรึงไว้	บูลีน	ไม่ว่าจะปักหมุดคอลัมน์ไว้ด้านข้างหรือ ไม่ รองรับเฉพาะคอลัมน์แรกและคอลัมน์สุดท้ายเท่านั้น	เท็จ
มองเห็นได้	บูลีน	ว่าจะแสดงคอลัมน์หรือไม่	จริง
ชื่อคลาส	เชือก	ตัวเลือกคลาสที่กำหนดเองสำหรับเซลล์คอลัมน์ทั้งหมด	-
ความกว้าง	เชือก	ความกว้างเริ่มต้นของคอลัมน์ในค่ากริด (รายการค่าทั้งหมด)	"200px"
minResizeWidth	ตัวเลข	ความกว้างขั้นต่ำของคอลัมน์เมื่อปรับขนาด	เสา `minColumnResizeWidth`
ความกว้างสูงสุดปรับขนาดได้	หมายเลข, โมฆะ	ความกว้างสูงสุดของคอลัมน์เมื่อปรับขนาด	โมฆะ
รับค่า	การทำงาน	ใช้เพื่อรับค่าเซลล์ (มีประโยชน์เมื่อค่าเซลล์ไม่ใช่สตริง - รายละเอียด)	`({value, column}) => value`
ตั้งค่า	การทำงาน	ใช้สำหรับอัพเดตค่าเซลล์ (มีประโยชน์เมื่อค่าเซลล์ไม่ใช่สตริง - รายละเอียด)	`({ value, data, setRow, column }) => { setRow({ ...data, [column.field]: value}) }`
ค้นหาได้	บูลีน	จะใช้การกรองการค้นหาในคอลัมน์หรือไม่	จริง
สามารถแก้ไขได้	บูลีน	ว่าจะอนุญาตให้แก้ไขคอลัมน์หรือไม่	จริง
จัดเรียงได้	บูลีน	ว่าจะอนุญาตให้เรียงลำดับคอลัมน์หรือไม่	จริง
ปรับขนาดได้	บูลีน	ว่าจะอนุญาตให้ปรับขนาดคอลัมน์หรือไม่	จริง
ค้นหา	การทำงาน	ฟังก์ชั่นการค้นหาคอลัมน์	`({value, searchText}) => value.toString().toLowerCase().includes(searchText.toLowerCase())`
เรียงลำดับ	การทำงาน	ฟังก์ชันการเรียงลำดับสำหรับคอลัมน์	`({a, b, isAscending}) => { let aa = typeof a === 'string' ? a.toLowerCase() : a; let bb = typeof b === 'string' ? b.toLowerCase() : b; if(aa > bb) return isAscending ? 1 : -1; else if(aa < bb) return isAscending ? -1 : 1; return 0; }`
เซลล์Renderer	การทำงาน	ใช้สำหรับการแสดงผลส่วนประกอบของเซลล์แบบกำหนดเอง `({ tableManager, value, data, column, colIndex, rowIndex }) => ( children )`	-
ส่วนหัวCellRenderer	การทำงาน	ใช้สำหรับการแสดงผลแบบกำหนดเองส่วนประกอบเซลล์ส่วนหัว `({ tableManager, column }) => ( children )`	-
บรรณาธิการ CellRenderer	การทำงาน	ใช้สำหรับการแสดงผลส่วนประกอบเซลล์ในโหมดแก้ไข `({ tableManager, value, data, column, colIndex, rowIndex, onChange }) => ( children )`	-
placeHolderRenderer	การทำงาน	ใช้สำหรับการแสดงผลแบบกำหนดเองส่วนประกอบตัวยึดตำแหน่งของเซลล์ที่จะแสดงเมื่อโหลดแถวใหม่ `({ tableManager, value, data, column, colIndex, rowIndex }) => ( children )`	-

ตัวอย่าง:

 // column config

{
  id : 'some-unique-id' ,
  field : 'first_name' ,
  label : 'First Name' ,
  className : '' ,
  pinned : false ,
  width : '200px' ,
  getValue : ( { tableManager , value , column , rowData } ) => value , 
  setValue : ( { value , data , setRow , column } ) => { setRow ( { ... data , [ column . field ] : value } ) } ,
  minResizeWidth : 70 ,
  maxResizeWidth : null ,
  sortable : true ,
  editable : true ,
  searchable : true ,
  visible : true ,
  resizable : true ,
  search : ( { value , searchText } ) => { } ,
  sort : ( { a , b , isAscending } ) => { } ,
  cellRenderer : ( { tableManager , value , data , column , colIndex , rowIndex } ) => ( children ) ,
  headerCellRenderer : ( { tableManager , column } ) => ( children ) ,
  editorCellRenderer : ( { tableManager , value , data , column , colIndex , rowIndex , onChange } ) => ( children ) ,
  placeHolderRenderer : ( { tableManager , value , data , column , colIndex , rowIndex } ) => ( children )
}

ช่องทำเครื่องหมาย-คอลัมน์

การเลือกแถวทำได้โดยคอลัมน์ที่กำหนดไว้ล่วงหน้า เพียงเพิ่มคอลัมน์ที่มี id เป็น 'ช่องทำเครื่องหมาย'

คอลัมน์ช่องทำเครื่องหมายรองรับคุณสมบัติต่อไปนี้:

ชื่อ	พิมพ์	คำอธิบาย	ค่าเริ่มต้น
รหัส*	'ช่องทำเครื่องหมาย'	จะสร้างคอลัมน์การเลือกแถว	-
ตรึงไว้	บูลีน	ไม่ว่าจะปักหมุดคอลัมน์ไว้ด้านข้างหรือ ไม่ รองรับเฉพาะคอลัมน์แรกและคอลัมน์สุดท้ายเท่านั้น	เท็จ
มองเห็นได้	บูลีน	ว่าจะแสดงคอลัมน์หรือไม่	จริง
ชื่อคลาส	เชือก	คลาสที่กำหนดเองสำหรับเซลล์คอลัมน์ทั้งหมด	-
ความกว้าง	เชือก	ความกว้างเริ่มต้นของคอลัมน์ในค่ากริด (รายการค่าทั้งหมด)	"เนื้อหาสูงสุด"
minResizeWidth	ตัวเลข	ความกว้างขั้นต่ำของคอลัมน์เมื่อปรับขนาด	0
ความกว้างสูงสุดปรับขนาดได้	หมายเลข, โมฆะ	ความกว้างสูงสุดของคอลัมน์เมื่อปรับขนาด	โมฆะ
ปรับขนาดได้	บูลีน	ว่าจะอนุญาตให้ปรับขนาดคอลัมน์หรือไม่	เท็จ
เซลล์Renderer	การทำงาน	ใช้สำหรับการแสดงผลเซลล์ช่องทำเครื่องหมายแบบกำหนดเอง	`({ tableManager, value, data, column, colIndex, rowIndex, onChange, disabled}) => ( <input type="checkbox" onChange={ onChange } checked={ value } disabled={ disabled } /> )`
ส่วนหัวCellRenderer	การทำงาน	ใช้สำหรับการแสดงผลเซลล์ส่วนหัวของช่องทำเครื่องหมายแบบกำหนดเอง	`({ tableManager, column, mode, ref, checked, disabled, indeterminate, onChange }) => ( <input type="checkbox" onChange={ onChange } checked={ checked } disabled={ disabled } /> )`

ตัวอย่าง:

 // checkbox column config

{
  id : 'checkbox' ,
  pinned : true ,
  className : '' ,
  width : '54px' ,
  minResizeWidth : 0 ,
  maxResizeWidth : null ,
  resizable : false ,
  visible : true ,
  cellRenderer : ( { tableManager , value , data , column , colIndex , rowIndex , onChange , disabled } ) => ( children )
  headerCellRenderer : ( { tableManager , column , mode , ref , checked , disabled , indeterminate , onChange } ) = > ( children )
}

แถว

ประเภท: อาร์เรย์ของวัตถุ

เสานี้มีข้อมูลสำหรับแถว

แต่ละแถวควรมีฟิลด์ตัวระบุที่ไม่ซ้ำกัน ซึ่งโดยค่าเริ่มต้นคือ id แต่สามารถเปลี่ยนเป็นฟิลด์อื่นได้โดยใช้ rowIdField prop

 // Example for a single row data

{
  "id" : " some-unique-id " , 
  "objectValueField" : { "x" : 1 , "y" : 2 }, 
  "username" : " wotham0 " ,
  "first_name" : " Waldemar " ,
  "last_name" : " Otham " ,
  "avatar" : " https://robohash.org/atquenihillaboriosam.bmp?size=32x32&set=set1 " ,
  "email" : " [email protected] " ,
  "gender" : " Male " ,
  "ip_address" : " 113.75.186.33 " ,
  "last_visited" : " 12/08/2019 "
}

หมายเหตุ: หากค่าคุณสมบัติไม่ใช่ประเภทสตริง หรือในกรณีที่คุณไม่ได้ระบุฟิลด์สำหรับคอลัมน์ คุณจะต้องใช้ฟังก์ชัน getValue บนคอลัมน์เพื่อแยกค่าที่ต้องการ

ลายเซ็น : getValue: ({ tableManager, value, column, rowData }) => string

ตัวอย่าง:

สมมติว่าค่าของช่องสำหรับเซลล์คือวัตถุ:

{ ... , fullName: {firstName: 'some-first-name', lastName: 'some-last-name'} } ,

ฟังก์ชัน getValue สำหรับแสดงชื่อและนามสกุลเป็นชื่อเต็มจะเป็นดังนี้:

getValue: ({ value }) => value.firstName + ' ' + value.lastName

ค่าที่ส่งคืนจะถูกใช้สำหรับการค้นหา การเรียงลำดับ ฯลฯ...

ส่วนประกอบ

ประเภท: วัตถุ

เสานี้ช่วยให้คุณสามารถแทนที่ส่วนประกอบภายในด้วยส่วนประกอบที่คุณกำหนดเองได้

ส่วนประกอบทั้งหมดจะถูกส่งออก ดังนั้นคุณจึงสามารถนำเข้าได้จากทุกที่ แต่คุณจะต้องรับผิดชอบในการจัดหาอุปกรณ์ประกอบฉากให้กับส่วนประกอบเหล่านั้น:

ส่วนประกอบ	อุปกรณ์ประกอบฉากที่จำเป็น	อุปกรณ์ประกอบฉากเสริม
ส่วนหัว	`tableManager`	-
ค้นหา	`tableManager`	`value` `onChange`
การมองเห็นคอลัมน์	`tableManager`	`columns` `onChange`
เฮดเดอร์เซลล์	`tableManager`	`column`
เซลล์การเลือกส่วนหัว	`tableManager`	`column` `ref` `onChange` `checked` `disabled`
เซลล์	`tableManager`	`value`
เอดิเตอร์เซลล์	`tableManager`	`value` `data` `column` `colIndex` `rowIndex` `onChange`
การเลือกเซลล์	`tableManager`	`value` `disabled` `onChange`
PlaceHolderCell	`tableManager`	-
รถตักดิน	`tableManager`	-
ไม่มีผลลัพธ์	`tableManager`	-
ลากแฮนเดิล	-	-
ส่วนท้าย	`tableManager`	-
ข้อมูล	`tableManager`	จำนวน `pageSize` `totalCount` ขนาดหน้า `pageCount` `selectedCount`
ขนาดหน้า	`tableManager`	`value` `onChange` `options`
การแบ่งหน้า	`tableManager`	`page` `onChange`

ตัวอย่าง: การเอาชนะส่วนประกอบส่วนหัว

 const Header = ( { tableManager } ) => {

    const { searchApi , columnsVisibilityApi , columnsApi } = tableManager ;

    const { searchText , setSearchText } = searchApi ;
    const { toggleColumnVisibility } = columnsVisibilityApi ;
    const { columns } = columnsApi ;

    return (
        < div style = { { display : 'flex' , flexDirection : 'column' , padding : '10px 20px' , background : '#fff' , width : '100%' } } >
            < div >
                < label htmlFor = "my-search" style = { { fontWeight : 500 , marginRight : 10 } } >
                    Search for:
                < / label >
                < input 
                    name = "my-search"
                    type = "search" 
                    value = { searchText } 
                    onChange = { e => setSearchText ( e . target . value ) } 
                    style = { { width : 300 } }
                / >
            < / div >
            < div style = { { display : 'flex' , marginTop : 10 } } >
                < span style = { { marginRight : 10 , fontWeight : 500 } } > Columns: < / span >
                {
                    columns . map ( ( column , idx ) => (
                        < div key = { idx } style = { { flex : 1 } } >
                            < input 
                                id = { `checkbox- ${ idx } ` }
                                type = "checkbox" 
                                onChange = { e => toggleColumnVisibility ( column . id ) } 
                                checked = { column . visible !== false } 
                            / >
                            < label htmlFor = { `checkbox- ${ idx } ` } style = { { flex : 1 , cursor : 'pointer' } } >
                                { column . label }
                            < / label >
                        < / div >
                    ) )
                }
            < / div >
        < / div >
    )
}

const MyAwesomeTable = props => {
    ...
    return (
        < GridTable
            . . .
            components = { { Header } }
        / >
    )
}

อุปกรณ์ประกอบฉากเพิ่มเติม

ประเภท: วัตถุ

เสานี้ช่วยให้คุณสามารถส่งอุปกรณ์ประกอบฉากไปยังส่วนประกอบ/โมดูลภายในได้

ตัวอย่าง การส่งอุปกรณ์ประกอบฉากไปยังส่วนประกอบของเซลล์:

 additionalProps = { { cell : { ... } , ... } }

รายการส่วนประกอบ/โมดูลที่คุณสามารถส่งอุปกรณ์ประกอบฉากไปที่:

ส่วนหัว
ค้นหา
การมองเห็นคอลัมน์
ส่วนหัวเซลล์
ส่วนหัวSelectionCell
เซลล์
บรรณาธิการเซลล์
การเลือกเซลล์
placeHolderCell
ส่วนท้าย
ข้อมูล
ขนาดหน้า
การแบ่งหน้า
แถวVirtualizer

ผู้จัดการโต๊ะ

นี่คือออบเจ็กต์ API ที่ใช้โดยส่วนประกอบภายใน คุณสามารถใช้มันเพื่อทำอะไรก็ได้ที่ API จัดเตรียมไว้ให้ภายนอกส่วนประกอบ

โครงสร้าง API:

id: ตัวระบุที่ไม่ซ้ำกันสำหรับแต่ละองค์ประกอบของตาราง
isMounted: โต๊ะถูกติดตั้งอยู่หรือไม่
isInitialized: ตารางถูกเตรียมใช้งานหรือไม่ จะถูกตั้งค่าเป็นจริงเมื่อเริ่มต้นส่วนประกอบทั้งหมดแล้ว
โหมด: 'sync' หรือ 'async' ซึ่งได้มาจากอุปกรณ์ประกอบฉากที่ให้มา
isLoading: ตารางกำลังโหลดข้อมูลอยู่หรือไม่
config: พารามิเตอร์ทั้งหมดที่กำหนดอินเทอร์เฟซผู้ใช้ของตารางและลักษณะการทำงานของตาราง
อ้างอิง: อ้างอิงวัตถุสำหรับองค์ประกอบที่เลือก
columnsApi: API ของคอลัมน์
columnsVisibilityApi: API ของการมองเห็นคอลัมน์
searchApi: API ของการค้นหา
sortApi: API ของการเรียงลำดับ
rowsApi: API ของแถว
paginationApi: API ของการแบ่งหน้า
rowSelectionApi: API ของการเลือกแถว
rowEditApi: API ของการแก้ไขแถว
rowVirtualizer: API ของแถว virtualizer (ดูเอกสารฉบับเต็มได้ที่ react-virtual )
asyncApi: API ของฟังก์ชัน async

กำหนดค่า

ชื่อ	พิมพ์	คำอธิบาย	ค่าเริ่มต้น
แถว IdField	เชือก	ชื่อของฟิลด์ในข้อมูลของแถวที่ควรใช้เป็นตัวระบุแถว - จะต้อง ไม่ซ้ำกัน	'รหัส'
minColumnResizeWidth	ตัวเลข	ความกว้างขั้นต่ำสำหรับคอลัมน์ทั้งหมดขณะปรับขนาด (ใช้ไม่ได้กับคอลัมน์ 'ช่องทำเครื่องหมาย')	70
minSearchChars	ตัวเลข	อักขระขั้นต่ำที่ต้องพิมพ์ก่อนที่จะใช้การค้นหา	2
isHeaderSticky	บูลีน	ไม่ว่าเซลล์ส่วนหัวของตารางจะติดอยู่ด้านบนเมื่อเลื่อนหรือไม่	จริง
เป็นเลขหน้า	บูลีน	กำหนดว่าควรแสดงตัวควบคุมการแบ่งหน้าในส่วนท้ายหรือไม่ และข้อมูลแถวควรแบ่งออกเป็นหน้าหรือไม่	จริง
เปิดใช้งานColumnsReorder	บูลีน	ว่าจะอนุญาตให้ลากและวางคอลัมน์เพื่อเปลี่ยนตำแหน่งหรือไม่	จริง
เน้นค้นหา	บูลีน	ไม่ว่าจะเน้นข้อความค้นหาหรือไม่	จริง
แสดงการค้นหา	บูลีน	ว่าจะแสดงองค์ประกอบการค้นหาในส่วนหัวหรือไม่	จริง
แสดงข้อมูลแถว	บูลีน	ว่าจะแสดงองค์ประกอบข้อมูลแถวหรือไม่ (อยู่ที่ด้านซ้ายของส่วนท้าย)	จริง
showColumnVisibilityManager	บูลีน	ว่าจะแสดงปุ่มการจัดการการมองเห็นคอลัมน์หรือไม่ (อยู่ที่มุมขวาบนของส่วนหัว)	จริง
ขนาดหน้า	อาร์เรย์ของตัวเลข	ตัวเลือกขนาดหน้า	[20, 50, 100]
ขอDebounceTimeout	ตัวเลข	กำหนดจำนวนเวลาดีเด้งสำหรับการทริกเกอร์เสา `onRowsRequest`	300
คือVirtualScroll	บูลีน	ไม่ว่าจะแสดงรายการในการเลื่อนเสมือนเพื่อปรับปรุงประสิทธิภาพหรือไม่ (มีประโยชน์เมื่อคุณมีแถวจำนวนมากในหนึ่งหน้า)	จริง
ตารางมีการเลือก	บูลีน	ไม่ว่าตารางจะมีคอลัมน์ช่องทำเครื่องหมายเพื่อควบคุมการเลือกแถวหรือไม่	-
ส่วนประกอบ	วัตถุ	ส่วนประกอบที่ใช้ในตาราง (ดูรายการส่วนประกอบทั้งหมด)	{ส่วนหัว, การค้นหา, การมองเห็นคอลัมน์, HeaderCell, HeaderSelectionCell, เซลล์, EditorCell, SelectionCell, PlaceHolderCell, Loader, NoResults, ส่วนท้าย, ข้อมูล, PageSize, Pagination}
อุปกรณ์ประกอบฉากเพิ่มเติม	วัตถุ	อุปกรณ์ประกอบฉากเพิ่มเติมที่ส่งผ่านไปยังส่วนประกอบภายใน (ดูรายการอุปกรณ์ประกอบฉากเพิ่มเติมทั้งหมด)	-
ไอคอน	วัตถุ	ไอคอนต่างๆ ที่ใช้ในตาราง	{ sortAscending, sortDescending, clearSelection, การมองเห็นคอลัมน์, การค้นหา, ตัวโหลด }
ข้อความ	วัตถุ	ข้อความที่ใช้ในตาราง	{ ค้นหา, TotalRows, แถว, เลือกแล้ว, rowsPerPage, หน้า, จาก, ก่อนหน้า, ถัดไป, columnVisibility }

ผู้อ้างอิง

ชื่อ	พิมพ์	คำอธิบาย
rgtRef	วัตถุ	วัตถุ `ref` ขององค์ประกอบ wrapper
ตารางอ้างอิง	วัตถุ	วัตถุ `ref` ขององค์ประกอบคอนเทนเนอร์ตาราง

คอลัมน์Api

ชื่อ	พิมพ์	คำอธิบาย	การใช้งาน
คอลัมน์	อาร์เรย์	การกำหนดค่าคอลัมน์	-
คอลัมน์ที่มองเห็นได้	อาร์เรย์	คอลัมน์ที่มองเห็นได้	-
ชุดคอลัมน์	การทำงาน	อัพเดตคอลัมน์	`setColumns(columns)`

คอลัมน์VisibilityApi

ชื่อ	พิมพ์	คำอธิบาย	การใช้งาน
สลับการมองเห็นคอลัมน์	การทำงาน	สลับการมองเห็นของคอลัมน์ตาม `id`	`toggleColumnVisibility(column.id)`

ค้นหาApi

ชื่อ	พิมพ์	คำอธิบาย	การใช้งาน
ข้อความค้นหา	เชือก	ข้อความสำหรับการค้นหา	-
validSearchText	เชือก	เป็นสตริงว่างหากข้อความที่ค้นหาไม่ผ่าน `minSearchChars` หากผ่านก็จะเท่ากับ `searchText`	-
setSearchText	การทำงาน	อัพเดตข้อความค้นหา	`setSearchText('hello')`
ค้นหาแถว	การทำงาน	กรองแถวตามข้อความค้นหา โดยใช้วิธีค้นหาที่กำหนดไว้ในคอลัมน์	`searchRows(rows)`
valuePassesSearch	การทำงาน	คืนค่าเป็นจริงหากค่าผ่านการค้นหาคอลัมน์ใดคอลัมน์หนึ่ง	`valuePassesSearch('hello', column)`

sortApi

ชื่อ	พิมพ์	คำอธิบาย	การใช้งาน
เรียงลำดับ	วัตถุ	วัตถุการเรียงลำดับเก็บ `colId` สำหรับ id ของคอลัมน์ที่ควรเรียงลำดับหรือ `null` เมื่อไม่มีการเรียงลำดับ และ `isAsc` ที่กำหนดทิศทางการเรียงลำดับ	-
ตั้งค่าเรียงลำดับ	การทำงาน	อัพเดตวัตถุการเรียงลำดับ	`setSort({colId: 5, isAsc: false})`
เรียงลำดับแถว	การทำงาน	จัดเรียงแถวตามทิศทางที่เลือกโดยใช้วิธีการจัดเรียงที่กำหนดไว้ในคอลัมน์	`sortRows(rows)`
สลับการเรียงลำดับ	การทำงาน	สลับขั้นตอนการเรียงลำดับของคอลัมน์จากน้อยไปมากไปมากไปน้อยและการไม่มีเลย	`toggleSort(column.id)`

แถวApi

ชื่อ	พิมพ์	คำอธิบาย	การใช้งาน
แถว	อาร์เรย์	ข้อมูลแถว (ในโหมดซิงค์ - ข้อมูลแถวหลังตัวกรองการค้นหาและการเรียงลำดับ)	-
ต้นฉบับแถว	อาร์เรย์	ข้อมูลแถวไม่ถูกแตะต้อง (ในโหมดซิงค์ - ข้อมูลแถวก่อนตัวกรองการค้นหา)	-
ตั้งค่าแถว	การทำงาน	อัพเดตแถว	`setRows(rows)`
แถวทั้งหมด	ตัวเลข	จำนวนแถวทั้งหมด	-
ตั้งค่าTotalRows	การทำงาน	อัพเดตจำนวนแถวทั้งหมด	`setTotalRows(1000)`

การแบ่งหน้าApi

ชื่อ	พิมพ์	คำอธิบาย	การใช้งาน
หน้าหนังสือ	ตัวเลข	หมายเลขหน้าปัจจุบัน	-
setPage	การทำงาน	อัพเดตหมายเลขหน้า	`setPage(3)`
ขนาดหน้า	ตัวเลข	ขนาดหน้าที่เลือก	-
กำหนดขนาดเพจ	การทำงาน	อัพเดตขนาดหน้า	`setPageSize(20)`
แถวหน้า	อาร์เรย์	แถวในหน้าปัจจุบัน	-
หน้าทั้งหมด	ตัวเลข	จำนวนหน้าทั้งหมด	-

rowSelectionApi

ชื่อ	พิมพ์	คำอธิบาย	การใช้งาน
เลือกRowsIds	อาร์เรย์ของรหัส	รหัสของแถวที่เลือกทั้งหมด	-
setSelectedRowsIds	การทำงาน	อัพเดตแถวที่เลือก	`setSelectedRowsIds([1,3,5])`
สลับการเลือกแถว	การทำงาน	สลับการเลือกแถวตาม `id`	`toggleRowSelection(row.id)`
getIsRowSelectable	การทำงาน	กำหนดว่าสามารถเลือกแถวได้หรือไม่	`getIsRowSelectable(row.id)`
เลือกทั้งหมดโหมด	เชือก	ประเภทของโหมดที่เลือกทั้งหมดที่เป็นไปได้คือหน้าที่ `page` เฉพาะการเลือกแถวของหน้าหรือ `all` ที่จัดการการเลือกแถวทั้งหมด หากใช้โฟลว์อะซิงก์ โหมดทั้งหมดจะจัดการการเลือกแถว ที่มีอยู่ ทั้งหมด และโหมดเพจที่มี `batchSize` ที่ได้รับการควบคุม จะจัดการการเลือกแถว ที่มีอยู่ ทั้งหมดในเพจ	-
เลือกทั้งหมดปิดการใช้งาน	บูลีน	ควรปิดใช้งานปุ่มเลือกทั้งหมดหรือไม่เนื่องจากไม่มีแถวที่เลือกได้ซึ่งตรงกับ selectAll.mode	-
เลือกทั้งหมด ตรวจสอบแล้ว	บูลีน	ไม่ว่าจะเลือกแถวทั้งหมดที่ตรงกับ selectAll.mode หรือไม่	-
เลือกทั้งหมดไม่แน่นอน	บูลีน	ไม่ว่าจะเลือกเพียงบางแถวที่ตรงกับ selectAll.mode หรือไม่	-
เลือกทั้งหมดบนการเปลี่ยนแปลง	การทำงาน	เลือก/ยกเลิกการเลือกแถวทั้งหมดที่ตรงกับ selectAll.mode	`selectAll.onChange()`
selectAll.ref	อ้างอิง	ข้อมูลอ้างอิงที่สามารถเพิ่มลงในช่องทำเครื่องหมายเลือกทั้งหมดเพื่อเปิดใช้งานการตั้งค่าอัตโนมัติของสถานะไม่แน่นอน	-

แถวแก้ไขApi

ชื่อ	พิมพ์	คำอธิบาย	การใช้งาน
แก้ไขแถว	วัตถุ	ข้อมูลของแถวที่กำลังแก้ไขอยู่	-
แก้ไขRowId	ใดๆ	รหัสของแถวที่กำลังแก้ไขอยู่	-
getIsRowEditable	การทำงาน	กำหนดว่าแถวสามารถแก้ไขได้หรือไม่	`getIsRowEditable(row)`
ตั้งค่าแก้ไขแถว	การทำงาน	อัปเดตข้อมูลของแถวของแถวที่แก้ไขในปัจจุบัน	`setEditRow(row)`
setEditRowId	การทำงาน	อัปเดตรหัสแถวของแถวที่แก้ไขในปัจจุบัน คุณสามารถส่ง `null` เพื่อเปลี่ยนกลับจากโหมดแก้ไขได้	`setEditRowId(row.id)`

อะซิงก์Api

ชื่อ	พิมพ์	คำอธิบาย	การใช้งาน / ค่าเริ่มต้น
กำลังโหลด	บูลีน	คำขอแถวใหม่ยังค้างอยู่หรือไม่	-
ผสานRowsAt	การทำงาน	ผสาน `array` s ของแถวที่ดัชนีบางตัวในขณะที่เติม "รู" ด้วย `null` s	`mergeRowsAt(rows, moreRows, atIndex)`
รีเซ็ตแถว	การทำงาน	ปล่อยแถวที่สะสมซึ่งจะทำให้เกิดคำขอใหม่	`resetRows()`
ขนาดแบตช์	ตัวเลข	กำหนดจำนวนแถวที่จะถูกร้องขอโดย `onRowsRequest` prop	`paginationApi.pageSize`

วิธี...

ซิงค์/อะซิงโครนัส

react-grid-table รองรับโมเดลข้อมูลที่แตกต่างกัน 4 แบบ:

ซิงค์:

ใช้โฟลว์นี้หากคุณมีข้อมูลทั้งหมดในเครื่อง
เพียงส่งข้อมูลทั้งหมดโดยใช้ rows prop

อุปกรณ์ประกอบฉากที่จำเป็น :

ชื่อ	พิมพ์	คำอธิบาย
แถว*	อาร์เรย์ของวัตถุ	ข้อมูลแถว (รายละเอียด)

ตัวอย่าง:

 export const SyncedTable = ( ) => {

    const rows = getRows ( ) ;
    const columns = getColumns ( ) ;

    return (
        < GridTable
            columns = { columns }
            rows = { rows }
        / >
    )
}

Async (ไม่มีการควบคุม):

ใช้โฟลว์นี้หากคุณต้องการดึงข้อมูลแบบไม่ซิงโครนัส และต้องการให้ react-grid-table สนองจัดการภายใน
ข้อมูลทั้งหมดจะถูกส่งไปยังตารางผ่านทางเสา onRowsRequest

อุปกรณ์ประกอบฉากที่จำเป็น :

ชื่อ	พิมพ์	คำอธิบาย
คำขอ onRows*	ฟังก์ชันอะซิงโครนัส	ควรส่งคืนสัญญาที่แก้ไขเป็น {rows, TotalRows}

ตัวอย่าง:

 export const AsyncUncontrolledTable = ( ) => {
    
    const columns = getColumns ( ) ;

    const onRowsRequest = async ( requestData , tableManager ) => {
        const response = await fetch ( `app/api/rows` , {
            method : 'post' ,
            body : {
                from : requestData . from ,
                to : requestData . to ,
                searchText : requestData . searchText ,
                sort : requestData . sort ,
            } ,
        } ) . then ( response => response . json ( ) ) . catch ( console . warn ) ;

        if ( ! response ?. items ) return ;
        
        return {
            rows : response . items ,
            totalRows : response . totalItems
        } ;
    }

    return (
        < GridTable
            columns = { columns }
            onRowsRequest = { onRowsRequest }
        / >
    )
}

Async (ควบคุม):

ใช้โฟลว์นี้หากคุณต้องการดึงข้อมูลแบบไม่ซิงโครนัส และต้องการให้ react-grid-table จัดการภายใน แต่ยังคงสามารถใช้ข้อมูลดังกล่าวในที่อื่นๆ ในแอปได้
ข้อมูลทั้งหมดจะถูกส่งไปยังตารางผ่านทางเสา onRowsRequest แต่ถูกควบคุมโดยองค์ประกอบหลักผ่านอุปกรณ์ประกอบฉาก rows , onRowsChange , totalRows และ onTotalRowsChange

อุปกรณ์ประกอบฉากที่จำเป็น :

ชื่อ	พิมพ์	คำอธิบาย
คำขอ onRows*	ฟังก์ชันอะซิงโครนัส	ควรส่งคืนสัญญาที่แก้ไขเป็น {rows, TotalRows}
แถว*	อาร์เรย์ของวัตถุ	ข้อมูลแถว (รายละเอียด)
บนแถวเปลี่ยน*	การทำงาน	ควรใช้เพื่อตั้งค่าข้อมูลปัจจุบัน
จำนวนแถวทั้งหมด*	ตัวเลข	ควรมีความยาวข้อมูลปัจจุบัน
บนTotalRowsเปลี่ยน*	การทำงาน	ควรใช้เพื่อกำหนดความยาวของข้อมูลปัจจุบัน

ตัวอย่าง:

 export const AsyncControlledTable = ( ) => {
    
    const columns = getColumns ( ) ;
    let [ rows , setRows ] = useState ( ) ;
    let [ totalRows , setTotalRows ] = useState ( ) ;

    const onRowsRequest = async ( requestData , tableManager ) => {
        const response = await fetch ( `app/api/rows` , {
            method : 'post' ,
            body : {
                from : requestData . from ,
                to : requestData . to ,
                searchText : requestData . searchText ,
                sort : requestData . sort ,
            } ,
        } ) . then ( response => response . json ( ) ) . catch ( console . warn ) ;

        if ( ! response ?. items ) return ;
        
        return {
            rows : response . items ,
            totalRows : response . totalItems
        } ;
    }

    return (
        < GridTable
            columns = { columns }
            onRowsRequest = { onRowsRequest }
            rows = { rows }
            onRowsChange = { setRows }
            totalRows = { totalRows }
            onTotalRowsChange = { setTotalRows }
        / >
    )
}

Async (จัดการ):

ใช้สิ่งนี้หากคุณต้องการดึงข้อมูลแบบไม่ซิงโครนัสและจัดการด้วยตนเอง (มีประโยชน์เมื่อมีที่อื่นที่ควรดึงข้อมูลเดียวกันได้)
ข้อมูลทั้งหมดจะถูกส่งไปยังตารางผ่านทาง rows prop ซึ่งควรได้รับการอัปเดตโดยใช้ onRowsRequest prop
หมายเหตุ : react-grid-table ไม่จำเป็นต้องขอข้อมูลพร้อมกัน ซึ่งหมายความว่า "หลุม" ในข้อมูลนั้นเป็นไปได้ "รู" เหล่านี้จะต้องเต็มไปด้วยรายการที่เป็นโมฆะหรือไม่ได้กำหนดเพื่อให้แน่ใจว่าใช้งานได้อย่างเหมาะสม

เพื่อให้บรรลุเป้าหมายนี้ คุณสามารถใช้:

 let mergedRows = tableManager . asyncApi . mergeRowsAt ( rows , fetchedRows , at )

อุปกรณ์ประกอบฉากที่จำเป็น :

ชื่อ	พิมพ์	คำอธิบาย
คำขอ onRows*	ฟังก์ชันอะซิงโครนัส	ควรอัปเดตอุปกรณ์ประกอบฉากแถวตามคำขอ
แถว*	อาร์เรย์ของวัตถุ	ข้อมูลแถว (รายละเอียด)
จำนวนแถวทั้งหมด*	ตัวเลข	ควรมีความยาวข้อมูลปัจจุบัน
onRowsรีเซ็ต*	การทำงาน	ควรใช้เพื่อรีเซ็ตข้อมูลปัจจุบัน จะถูกเรียกเมื่อการเรียงลำดับหรือข้อความค้นหาเปลี่ยนแปลง

ตัวอย่าง:

 const controller = new AbortController ( ) ;

export const AsyncManagedTable = ( ) => {
    
    const columns = getColumns ( ) ;
    let rowsRef = useRef ( [ ] ) ;
    let [ totalRows , setTotalRows ] = useState ( ) ;

    const onRowsRequest = async ( requestData , tableManager ) => {
        const response = await fetch ( `app/api/rows` , {
            method : 'post' ,
            body : {
                from : requestData . from ,
                to : requestData . to ,
                searchText : requestData . searchText ,
                sort : requestData . sort ,
            } ,
            signal : controller . signal ,
        } ) . then ( response => response . json ( ) ) . catch ( console . warn ) ;

        if ( ! response ?. items ) return ;

        rowsRef . current = tableManager . asyncApi . mergeRowsAt ( rowsRef . current , response . items , requestData . from ) ;

        setTotalRows ( response . totalItems ) ;
    }

    const onRowsReset = ( ) => {
        rowsRef . current = [ ] ;
        setTotalRows ( ) ;
        controller . abort ( ) ;
    }

    return (
        < GridTable
            columns = { columns }
            rows = { rowsRef . current }
            onRowsRequest = { onRowsRequest }
            onRowsReset = { onRowsReset }
            totalRows = { totalRows }
            requestDebounceTimeout = { 500 }
        / >
    )
}

การแก้ไขแถว

การแก้ไขแถวสามารถทำได้โดยการแสดงปุ่มแก้ไขโดยใช้คุณสมบัติ cellRenderer ในการกำหนดค่าคอลัมน์ จากนั้นเมื่อคลิกแล้วจะควบคุมเสา editRowId จากนั้นตารางจะแสดงส่วนประกอบการแก้ไขสำหรับคอลัมน์ที่ถูกกำหนดว่า editable (จริงตามค่าเริ่มต้น) และตามที่กำหนดไว้ใน editorCellRenderer ซึ่งโดยค่าเริ่มต้นจะแสดงผลการป้อนข้อความ

ตัวอย่าง:

 // state
const [ rowsData , setRows ] = useState ( MOCK_DATA ) ;

// 'editRowId' can also be controlled.
// if using controlled state, you can call your 'setEditRowId' instead of 'tableManager.rowEditApi.setEditRowId' to set it directly on your state.
// the table will typicaly call 'onEditRowIdChange' to reset it if 'searchText', 'sort' or 'page' has changed.
// const [editRowId, setEditRowId] = useState(null)

// columns
let columns = [
    ... ,
    {
        id : 'my-buttons-column' ,
        width : 'max-content' ,
        pinned : true ,
        sortable : false ,
        resizable : false ,
        cellRenderer : ( { tableManager , value , data , column , colIndex , rowIndex } ) => (
            < button 
                style = { { marginLeft : 20 } } 
                onClick = { e => tableManager . rowEditApi . setEditRowId ( data . id ) }
            > &#x270E; < / button >
        ) ,
        editorCellRenderer : ( { tableManager , value , data , column , colIndex , rowIndex , onChange } ) => (
            < div style = { { display : 'inline-flex' } } >
                < button 
                    style = { { marginLeft : 20 } } 
                    onClick = { e => tableManager . rowEditApi . setEditRowId ( null ) }
                > &#x2716; < / button >
                < button 
                    style = { { marginLeft : 10 , marginRight : 20 } } 
                    onClick = { e => {
                        let rowsClone = [ ... rowsData ] ;
                        let updatedRowIndex = rowsClone . findIndex ( r => r . id === data . id ) ;
                        rowsClone [ updatedRowIndex ] = data ;

                        setRowsData ( rowsClone ) ;
                        tableManager . rowEditApi . setEditRowId ( null ) ;
                    }
                } > &#x2714; < / button >
            < / div >
        )
    }
] ;

// render
< GridTable 
    columns = { columns }
    rows = { rowsData } 
    //editRowId={editRowId}
    //onEditRowIdChange={setEditRowId}
    . . .
/ >

สำหรับคอลัมน์ที่เก็บค่าอื่นที่ไม่ใช่สตริง คุณจะต้องกำหนดฟังก์ชัน setValue บนคอลัมน์ เพื่อให้ค่าที่อัปเดตจะไม่แทนที่ค่าเดิม

ตัวอย่าง:

setValue: ( { value , data , setRow , column } ) => {
    // value: '35', 
    // data: { ..., columnField: { fieldToUpdate: '27' }} 
    let rowClone = { ... data } ;
    rowClone [ column . field ] . fieldToUpdate = value ;
    setRow ( rowClone ) ;
}

จัดแต่งทรงผม

การจัดสไตล์ทำได้โดยคลาส CSS ที่คุณสามารถแทนที่ได้อย่างง่ายดาย ส่วนประกอบของตารางจะถูกแมปกับคลาสที่กำหนดไว้ล่วงหน้าซึ่งควรครอบคลุมทุกสถานการณ์ และคุณสามารถเพิ่มคลาสที่คุณกำหนดเองต่อคอลัมน์ในการกำหนดค่า columns ได้โดยใช้คุณสมบัติ className

ส่วนประกอบ	ตัวเลือกคลาสที่มีอยู่ทั้งหมด
กระดาษห่อ	`rgt-wrapper`
ส่วนหัว	`rgt-header-container`
ค้นหา	`rgt-search-container` `rgt-search-label` `rgt-search-icon` `rgt-search-input` `rgt-search-highlight`
ตัวจัดการการมองเห็นคอลัมน์	`rgt-columns-manager-wrapper` `rgt-columns-manager-button` `rgt-columns-manager-button-active` `rgt-columns-manager-popover` `rgt-columns-manager-popover-open` `rgt-columns-manager-popover-row` `rgt-columns-manager-popover-title` `rgt-columns-manager-popover-body`
โต๊ะ	`rgt-container` `rgt-container-overlay`
เซลล์ส่วนหัว	`rgt-cell-header` `rgt-cell-header-[column.field]` `rgt-cell-header-checkbox` `rgt-cell-header-virtual-col` `rgt-cell-header-sortable / rgt-cell-header-not-sortable` `rgt-cell-header-sticky` `rgt-cell-header-resizable / rgt-cell-header-not-resizable` `rgt-cell-header-searchable / rgt-cell-header-not-searchable` `rgt-cell-header-pinned` `rgt-cell-header-pinned-left / rgt-cell-header-pinned-right` `rgt-cell-header-inner-not-pinned-right` `[column.className]` `rgt-cell-header-inner` `rgt-cell-header-inner-checkbox` `rgt-resize-handle` `rgt-sort-icon` `rgt-sort-icon-ascending / rgt-sort-icon-descending` `rgt-column-sort-ghost`
เซลล์	`rgt-cell` `rgt-cell-[column.field]` `rgt-row-[rowNumber]` `rgt-row-odd / rgt-row-even` `rgt-row-hover` `rgt-row-selectable / rgt-row-not-selectable` `rgt-cell-inner` `rgt-cell-checkbox` `rgt-cell-inner` `rgt-cell-virtual` `rgt-cell-pinned` `rgt-cell-pinned-left / rgt-cell-pinned-right` `rgt-cell-editor` `rgt-cell-editor-inner` `rgt-cell-editor-input` `rgt-row-selected` `rgt-placeholder-cell` `rgt-row-edit`
ส่วนท้าย	`rgt-footer` `rgt-footer-right-container`
การแบ่งหน้า	`rgt-footer-pagination` `rgt-footer-pagination-button` `rgt-footer-pagination-input-container` `rgt-footer-page-input`
ข้อมูล	`rgt-footer-items-information` `rgt-footer-clear-selection-button`
ขนาดหน้า	`rgt-footer-page-size` `rgt-footer-page-size-select`
(ประโยชน์)	`rgt-text-truncate` `rgt-clickable` `rgt-disabled` `rgt-disabled-button` `rgt-flex-child`

ใบอนุญาต

ขยาย