react grid table
V.1.1.2
جدول معياري، يعتمد على تخطيط شبكة 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 ;columnscheckboxrowscomponents تدعمadditionalPropstableManagerHEADER (اختياري | قابل للتخصيص): إدارة رؤية البحث والعمود.
رأس الجدول: الفرز وتغيير الحجم وإعادة ترتيب الأعمدة.
TABLE-BODY: عرض البيانات / المُحمل / عدم وجود نتائج، وتحرير الصف واختيار الصف.
التذييل (اختياري | قابل للتخصيص): معلومات الصفوف والصفوف لكل صفحة وترقيم الصفحات.
| اسم | يكتب | وصف | القيمة الافتراضية |
|---|---|---|---|
| الأعمدة* | مجموعة من الكائنات | تكوين الأعمدة (التفاصيل) | [ ] |
| صفوف | مجموعة من الكائنات | بيانات الصفوف (التفاصيل) | [ ] |
| معرفات الصفوف المحددة | مجموعة من معرفات | معرفات جميع الصفوف المحددة (التفاصيل) | [ ] |
| searchText | خيط | نص للبحث | "" |
| getIsRowSelectable | وظيفة | وظيفة رد الاتصال التي تُرجع ما إذا كان يجب تحديد الصف للصف الحالي أو تعطيله | row => true |
| getIsRowEditable | وظيفة | دالة رد اتصال تُرجع ما إذا كان ينبغي السماح بتحرير الصف للصف الحالي أم لا | row => true |
| EditRowId | أي | معرف الصف الذي يجب أن يتحول إلى وضع التحرير المضمن (مزيد من التفاصيل حول تحرير الصف) | باطل |
| صفحة | رقم | رقم الصفحة الحالية | 1 |
| حجم الصفحة | رقم | حجم الصفحة المحدد | 20 |
| نوع | هدف | تكوين الفرز. يقبل colId لمعرف العمود الذي يجب فرزه، و isAsc لتحديد اتجاه الفرز. على سبيل المثال: { colId: 'some-column-id', isAsc: true } ، لإلغاء الفرز، قم ببساطة بتمرير colId على أنه null | { } |
| isLoading | منطقية | ما إذا كان سيتم عرض المحمل | خطأ شنيع |
| اسم | يكتب | وصف | القيمة الافتراضية |
|---|---|---|---|
| RowIdField | خيط | اسم الحقل الموجود في بيانات الصف والذي يجب استخدامه كمعرف الصف - يجب أن يكون فريدًا | 'بطاقة تعريف' |
| minColumnResizeWidth | رقم | الحد الأدنى للعرض لجميع الأعمدة أثناء تغيير الحجم (لا ينطبق على عمود "مربع الاختيار") | 70 |
| minSearchChars | رقم | سيتم تطبيق الحد الأدنى من الأحرف المراد كتابتها قبل البحث | 2 |
| isHeaderSticky | منطقية | ما إذا كانت خلايا رأس الجدول ستلتصق بالأعلى عند التمرير أم لا | حقيقي |
| مرقّم | منطقية | تحديد ما إذا كان ينبغي إظهار عناصر التحكم في ترقيم الصفحات في التذييل وما إذا كان يجب تقسيم بيانات الصفوف إلى صفحات | حقيقي |
| تمكين الأعمدةإعادة الطلب | منطقية | ما إذا كان سيتم السماح بسحب العمود وإفلاته لإعادة تحديد موضعه | حقيقي |
| HighlightSearch | منطقية | ما إذا كان سيتم تسليط الضوء على مصطلح البحث | حقيقي |
| showSearch | منطقية | ما إذا كان سيتم إظهار مكون البحث في الرأس | حقيقي |
| showRowsInformation | منطقية | ما إذا كان سيتم إظهار مكون معلومات الصفوف (الموجود على الجانب الأيسر من التذييل) | حقيقي |
| showColumnVisibilityManager | منطقية | ما إذا كان سيتم عرض زر إدارة رؤية الأعمدة (الموجود في أعلى يمين الرأس) | حقيقي |
| pageSizes | مجموعة من الأرقام | خيارات حجم الصفحة | [20، 50، 100] |
| isVirtualScroll | منطقية | ما إذا كان سيتم عرض العناصر في تمرير افتراضي لتحسين الأداء (مفيد عندما يكون لديك الكثير من الصفوف في الصفحة) | حقيقي |
| حدد AllMode | خيط | يتحكم في نوع "كل التحديد". الخيارات المتاحة هي page لتحديد/إلغاء تحديد الصفوف الموجودة في الصفحة الحالية فقط، أو all لتحديد/إلغاء تحديد جميع الصفوف في جميع الصفحات. في حالة استخدام تدفق غير متزامن، سيحدد خيار all جميع الصفوف المتاحة ، وسيقوم خيار page المدمج مع batchSize بتحديد/إلغاء تحديد جميع الصفوف المتاحة في الصفحة | 'صفحة' |
| أيقونات | كائن العقد | تكوين الرموز المخصصة | { فرز تصاعدي، فرز تنازلي، مسح التحديد، عمود الرؤية، البحث، المحمل } |
| النصوص | هدف | التكوين لجميع نصوص واجهة المستخدم، وهو مفيد للترجمات أو لتخصيص النص | { البحث: 'بحث:'، TotalRows: 'إجمالي الصفوف:'، الصفوف: 'الصفوف:'، المحدد: 'محدد'،rowsPerPage: 'الصفوف في كل صفحة:'، الصفحة: 'الصفحة:'، من: 'من' , prev: 'السابق'، التالي: 'التالي'، columnVisibility: 'رؤية العمود' } |
| عناصر | هدف | تمنحك هذه الدعامة القدرة على تجاوز المكونات الداخلية بمكوناتك المخصصة (راجع القائمة الكاملة للمكونات المدعومة) | { المكونات الافتراضية } |
| extraProps | هدف | تمنحك هذه الدعامة القدرة على تمرير الدعائم إلى مكونات/وحدات الجدول (راجع القائمة الكاملة للدعائم الإضافية المدعومة) | additionalProps={{ header: { ... } }} |
| اسم | يكتب | وصف | الاستخدام |
|---|---|---|---|
| onColumnsChange | وظيفة | يتم تشغيله عند تغيير columns | columns => { ... } |
| onSelectedRowsChange | وظيفة | يتم تشغيله عند تغيير اختيار الصفوف | selectedRowsIds => { ... } |
| onPageChange | وظيفة | يتم تشغيله عند تغيير الصفحة | nextPage => { ... } |
| onPageSizeChange | وظيفة | يتم تشغيله عند تغيير حجم الصفحة | newPageSize => { ... } |
| onSearchTextChange | وظيفة | يتم تشغيله عند تغيير نص البحث | searchText => { ... } |
| onSortChange | وظيفة | مشغلات عند تغيير النوع | ({colId, isAsc}) => { ... } |
| onRowClick | وظيفة | يتم تشغيله عند النقر فوق صف | ({ rowIndex, data, column, isEdit, event }, tableManager) => { ... } |
| onEditRowIdChange | وظيفة | يتم تشغيله عند تغيير rowEditId | rowEditId => { ... } |
| onLoad | وظيفة | يتم تشغيله عند تهيئة tableManager (التفاصيل) | tableManager => { ... } |
| onColumnResizeStart | وظيفة | يتم تشغيله عند بدء تغيير حجم العمود | ({event, target, column}) => { ... } |
| onColumnResize | وظيفة | يتم تشغيله عند حدوث تغيير حجم العمود | ({event, target, column}) => { ... } |
| onColumnResizeEnd | وظيفة | يتم تشغيله عند انتهاء تغيير حجم العمود | ({event, target, column}) => { ... } |
| onColumnReorderStart | وظيفة | مشغلات على سحب العمود. بيانات الفرز التي توفرها React-sortable-hoc باستخدام خاصية onSortStart | (sortData, tableManager) => { ... } |
| onColumnReorderEnd | وظيفة | يتم تشغيله عند إسقاط العمود، وفقط إذا قام العمود بتغيير موضعه. بيانات الفرز التي توفرها React-sortable-hoc باستخدام خاصية onSortEnd | (sortData, tableManager) => { ... } |
| اسم | يكتب | وصف | الاستخدام/القيمة الافتراضية |
|---|---|---|---|
| onRowsRequest | وظيفة | يتم تشغيله عند جلب صفوف جديدة | انظر المثال |
| onRowsChange | وظيفة | يتم تشغيله عند تغيير الصفوف | انظر المثال |
| onTotalRowsChange | وظيفة | يتم تشغيله عند تغير العدد الإجمالي للصفوف | انظر المثال |
| onRowsReset | وظيفة | يتم تشغيله عندما تحتاج الصفوف المتراكمة إلى إعادة التعيين (عند البحث أو الفرز) | انظر المثال |
| حجم الدُفعة | رقم | يحدد مقدار الصفوف التي سيتم طلبها بواسطة خاصية onRowsRequest | حجم صفحة الجدول |
| requestDebounceTimeout | رقم | يحدد مقدار وقت الارتداد لتشغيل خاصية onRowsRequest | 300 |
| com.totalRows | رقم | إجمالي عدد الصفوف | --- |
النوع: مجموعة من الكائنات.
تحدد هذه الدعامة تكوين الأعمدة.
يتمتع كل عمود (باستثناء عمود "مربع الاختيار") بدعم للخصائص التالية:
| اسم | يكتب | وصف | القيمة الافتراضية |
|---|---|---|---|
| بطاقة تعريف* | أي | معرف فريد للعمود، سيؤدي تعيينه على "خانة اختيار" إلى إنشاء عمود اختيار الصفوف (مزيد من التفاصيل حول عمود خانة الاختيار) | --- |
| مجال | خيط | اسم الحقل كما في بيانات الصف | --- |
| ملصق | خيط | التسمية التي سيتم عرضها في خلية الرأس | خاصية field |
| مثبت | منطقية | ما إذا كان سيتم تثبيت العمود على الجانب، أم لا، مدعومًا فقط في العمودين الأول والأخير | خطأ شنيع |
| مرئي | منطقية | ما إذا كان سيتم عرض العمود | حقيقي |
| اسم الفئة | خيط | محدد فئة مخصصة لجميع خلايا الأعمدة | "" |
| عرض | خيط | العرض الأولي للعمود في قيم الشبكة (قائمة كاملة من القيم) | "200 بكسل" |
| minResizeWidth | رقم | الحد الأدنى لعرض العمود عند تغيير الحجم | دعم minColumnResizeWidth |
| maxResizeWidth | الرقم، خالي | الحد الأقصى لعرض العمود عند تغيير الحجم | باطل |
| getValue | وظيفة | يستخدم للحصول على قيمة الخلية (مفيد عندما لا تكون قيمة الخلية سلسلة - تفاصيل) | ({value, column}) => value |
| setValue | وظيفة | يستخدم لتحديث قيمة الخلية (مفيد عندما لا تكون قيمة الخلية سلسلة - تفاصيل) | ({ 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; } |
| 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 ) | --- |
مثال:
// 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 |
| maxResizeWidth | الرقم، خالي | الحد الأقصى لعرض العمود عند تغيير الحجم | باطل |
| يمكن تغيير حجمه | منطقية | ما إذا كان سيتم السماح بتغيير حجم العمود | خطأ شنيع |
| cellRenderer | وظيفة | تستخدم لعرض خلية خانة الاختيار المخصصة | ({ tableManager, value, data, column, colIndex, rowIndex, onChange, disabled}) => ( <input type="checkbox" onChange={ onChange } checked={ value } disabled={ disabled } /> ) |
| headerCellRenderer | وظيفة | تستخدم للعرض المخصص لخلية رأس مربع الاختيار | ({ 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 .
// 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 |
| HeaderCell | tableManager | column |
| HeaderSelectionCell | tableManager | disabled ref column onChange checked |
| خلية | tableManager | value |
| EditorCell | tableManager | column data value colIndex onChange rowIndex |
| خلية التحديد | tableManager | disabled value onChange |
| PlaceHolderCell | tableManager | --- |
| محمل | tableManager | --- |
| لا توجد نتائج | tableManager | --- |
| DragHandle | --- | --- |
| تذييل | tableManager | --- |
| معلومة | tableManager | totalCount pageSize 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 : { ... } , ... } }قائمة المكونات/الوحدات التي يمكنك تمرير الدعائم إليها:
هذا هو كائن API الذي تستخدمه المكونات الداخلية، ويمكنك استخدامه للقيام بأي شيء توفره واجهة برمجة التطبيقات، خارج المكون.
هيكل واجهة برمجة التطبيقات:
| اسم | يكتب | وصف | القيمة الافتراضية |
|---|---|---|---|
| RowIdField | خيط | اسم الحقل الموجود في بيانات الصف والذي يجب استخدامه كمعرف الصف - يجب أن يكون فريدًا | 'بطاقة تعريف' |
| minColumnResizeWidth | رقم | الحد الأدنى للعرض لجميع الأعمدة أثناء تغيير الحجم (لا ينطبق على عمود "مربع الاختيار") | 70 |
| minSearchChars | رقم | سيتم تطبيق الحد الأدنى من الأحرف المراد كتابتها قبل البحث | 2 |
| isHeaderSticky | منطقية | ما إذا كانت خلايا رأس الجدول ستلتصق بالأعلى عند التمرير أم لا | حقيقي |
| مرقّم | منطقية | تحديد ما إذا كان ينبغي إظهار عناصر التحكم في ترقيم الصفحات في التذييل وما إذا كان يجب تقسيم بيانات الصفوف إلى صفحات | حقيقي |
| تمكين الأعمدةإعادة الطلب | منطقية | ما إذا كان سيتم السماح بسحب العمود وإفلاته لإعادة تحديد موضعه | حقيقي |
| HighlightSearch | منطقية | ما إذا كان سيتم تسليط الضوء على مصطلح البحث | حقيقي |
| showSearch | منطقية | ما إذا كان سيتم إظهار مكون البحث في الرأس | حقيقي |
| showRowsInformation | منطقية | ما إذا كان سيتم إظهار مكون معلومات الصفوف (الموجود على الجانب الأيسر من التذييل) | حقيقي |
| showColumnVisibilityManager | منطقية | ما إذا كان سيتم عرض زر إدارة رؤية الأعمدة (الموجود في أعلى يمين الرأس) | حقيقي |
| pageSizes | مجموعة من الأرقام | خيارات حجم الصفحة | [20، 50، 100] |
| requestDebounceTimeout | رقم | يحدد مقدار وقت الإلغاء لتشغيل خاصية onRowsRequest | 300 |
| isVirtualScroll | منطقية | ما إذا كان سيتم عرض العناصر في تمرير افتراضي لتحسين الأداء (مفيد عندما يكون لديك الكثير من الصفوف في الصفحة) | حقيقي |
| tableHasSelection | منطقية | إذا كان الجدول يحتوي على عمود خانة اختيار للتحكم في اختيار الصفوف | --- |
| عناصر | هدف | المكونات المستخدمة في الجدول (انظر القائمة الكاملة للمكونات) | {Header، Search، ColumnVisibility، HeaderCell، HeaderSelectionCell، Cell، EditorCell، SelectionCell، PlaceHolderCell، Loader، NoResults، Footer، Information، PageSize، Pagination} |
| extraProps | هدف | الدعائم الإضافية التي تم تمريرها إلى المكونات الداخلية (راجع القائمة الكاملة للدعائم الإضافية) | {} |
| أيقونات | هدف | الرموز التي يستخدمها الجدول | { فرز تصاعدي، فرز تنازلي، مسح التحديد، عمود الرؤية، البحث، المحمل } |
| النصوص | هدف | النصوص التي يستخدمها الجدول | { بحث، إجمالي الصفوف، الصفوف، المحددة، الصفوف لكل صفحة، صفحة، من، السابق، التالي، عمود الرؤية } |
| اسم | يكتب | وصف |
|---|---|---|
| rgtRef | هدف | الكائن ref لعنصر الغلاف |
| الجدولالمرجع | هدف | الكائن ref لعنصر حاوية الجدول |
| اسم | يكتب | وصف | الاستخدام |
|---|---|---|---|
| أعمدة | صفيف | تكوين الأعمدة | --- |
| visualColumns | صفيف | الأعمدة التي تكون مرئية | --- |
| setColumns | وظيفة | يقوم بتحديث الأعمدة | setColumns(columns) |
| اسم | يكتب | وصف | الاستخدام |
|---|---|---|---|
| toggleColumnVisibility | وظيفة | تبديل رؤية العمود من خلال id | toggleColumnVisibility(column.id) |
| اسم | يكتب | وصف | الاستخدام |
|---|---|---|---|
| searchText | خيط | نص للبحث | --- |
| validSearchText | خيط | عبارة عن سلسلة فارغة إذا لم يتجاوز النص الذي تم البحث عنه minSearchChars ، وإذا نجح، فسيكون مساويًا لـ searchText | --- |
| setSearchText | وظيفة | يقوم بتحديث نص البحث | setSearchText('hello') |
| this.searchRows | وظيفة | يقوم بتصفية الصفوف بناءً على نص البحث، باستخدام طريقة البحث المحددة في الأعمدة | searchRows(rows) |
| valuePassesSearch | وظيفة | يُرجع صحيحًا إذا اجتازت القيمة البحث عن عمود معين | valuePassesSearch('hello', column) |
| اسم | يكتب | وصف | الاستخدام |
|---|---|---|---|
| نوع | هدف | يحمل كائن الفرز colId لمعرف العمود الذي يجب فرزه أو null في حالة عدم وجود فرز، و isAsc الذي يحدد اتجاه الفرز | --- |
| setSort | وظيفة | يقوم بتحديث كائن الفرز | setSort({colId: 5, isAsc: false}) |
| SortRows | وظيفة | فرز الصفوف بناءً على الاتجاه المحدد باستخدام طريقة الفرز المحددة في العمود | sortRows(rows) |
| تبديل فرز | وظيفة | يقوم بتبديل خطوات فرز العمود من التصاعدي إلى التنازلي وإلى لا شيء | toggleSort(column.id) |
| اسم | يكتب | وصف | الاستخدام |
|---|---|---|---|
| صفوف | صفيف | بيانات الصفوف (في وضع المزامنة - بيانات الصفوف بعد مرشح البحث والفرز) | --- |
| originalRows | صفيف | بيانات الصفوف لم تمس (في وضع المزامنة - بيانات الصفوف قبل مرشح البحث) | --- |
| setRows | وظيفة | يقوم بتحديث الصفوف | setRows(rows) |
| com.totalRows | رقم | إجمالي عدد الصفوف | --- |
| setTotalRows | وظيفة | يقوم بتحديث العدد الإجمالي للصفوف | setTotalRows(1000) |
| اسم | يكتب | وصف | الاستخدام |
|---|---|---|---|
| صفحة | رقم | رقم الصفحة الحالية | --- |
| setPage | وظيفة | يقوم بتحديث رقم الصفحة | setPage(3) |
| حجم الصفحة | رقم | حجم الصفحة المحدد | --- |
| setPageSize | وظيفة | يقوم بتحديث حجم الصفحة | setPageSize(20) |
| pageRows | صفيف | الصفوف الموجودة في الصفحة الحالية | --- |
| com.totalPages | رقم | إجمالي عدد الصفحات | --- |
| اسم | يكتب | وصف | الاستخدام |
|---|---|---|---|
| معرفات الصفوف المحددة | مجموعة من معرفات | معرفات جميع الصفوف المحددة | --- |
| setSelectedRowsIds | وظيفة | يقوم بتحديث الصفوف المحددة | setSelectedRowsIds([1,3,5]) |
| toggleRowSelection | وظيفة | تبديل اختيار صف من خلال id | toggleRowSelection(row.id) |
| getIsRowSelectable | وظيفة | يحدد ما إذا كان يمكن تحديد صف | getIsRowSelectable(row.id) |
| حدد الكل. الوضع | خيط | نوع تحديد الكل، الأوضاع الممكنة هي page التي تعالج فقط اختيار صفوف الصفحة، أو all ما يعالج اختيار جميع الصفوف. في حالة استخدام تدفق غير متزامن، سيتعامل كل الوضع مع اختيار جميع الصفوف المتاحة ، وسيتعامل وضع الصفحة مع batchSize المتحكم فيه مع تحديد جميع الصفوف المتاحة في الصفحة | --- |
| حدد الكل. معطل | منطقية | ما إذا كان يجب تعطيل زر تحديد الكل نظرًا لعدم وجود صفوف قابلة للتحديد تتطابق مع الوضع SelectAll | --- |
| حدد الكل. تم التحقق منه | منطقية | ما إذا تم تحديد كافة الصفوف التي تطابق SelectAll.mode | --- |
| حدد الكل.غير محدد | منطقية | ما إذا كان قد تم تحديد بعض الصفوف التي تطابق SelectAll.mode فقط | --- |
| حددAll.onChange | وظيفة | تحديد/إلغاء تحديد كافة الصفوف التي تطابق تحديد الكل.mode | selectAll.onChange() |
| حدد الكل.المرجع | المرجع | مرجع يمكن إضافته إلى خانة الاختيار تحديد الكل لتمكين الإعداد التلقائي للحالة غير المحددة | --- |
| اسم | يكتب | وصف | الاستخدام |
|---|---|---|---|
| تحرير الصف | هدف | بيانات الصف الذي يتم تحريره حاليًا | --- |
| EditRowId | أي | معرف الصف الذي يتم تحريره حاليًا | --- |
| getIsRowEditable | وظيفة | يحدد ما إذا كان يمكن تحرير الصف | getIsRowEditable(row) |
| setEditRow | وظيفة | يقوم بتحديث بيانات الصف للصف الذي تم تحريره حاليًا | setEditRow(row) |
| setEditRowId | وظيفة | لتحديث معرف الصف للصف الذي تم تحريره حاليًا، يمكنك تمرير null للتبديل مرة أخرى من وضع التحرير | setEditRowId(row.id) |
| اسم | يكتب | وصف | الاستخدام/القيمة الافتراضية |
|---|---|---|---|
| isLoading | منطقية | ما إذا كان طلب صفوف جديدة لا يزال معلقًا | --- |
| mergeRowsAt | وظيفة | يدمج array من الصفوف في فهرس معين أثناء ملء "الثقوب" بالقيم null | mergeRowsAt(rows, moreRows, atIndex) |
| إعادة تعيين الصفوف | وظيفة | يسقط الصفوف المتراكمة، الأمر الذي سيؤدي إلى طلب جديد | resetRows() |
| حجم الدُفعة | رقم | يحدد مقدار الصفوف التي سيتم طلبها بواسطة خاصية onRowsRequest | paginationApi.pageSize |
يدعم react-grid-table 4 نماذج بيانات مختلفة:
استخدم هذا التدفق إذا كانت لديك جميع البيانات محليًا.
ما عليك سوى تمرير جميع البيانات باستخدام خاصية rows .
الدعائم المطلوبة :
| اسم | يكتب | وصف |
|---|---|---|
| صفوف* | مجموعة من الكائنات | بيانات الصفوف (التفاصيل) |
مثال:
export const SyncedTable = ( ) => {
const rows = getRows ( ) ;
const columns = getColumns ( ) ;
return (
< GridTable
columns = { columns }
rows = { rows }
/ >
)
} استخدم هذا التدفق إذا كنت بحاجة إلى جلب البيانات غير المتزامنة، وتريد أن يقوم react-grid-table بإدارتها داخليًا.
يتم توفير جميع البيانات إلى الجدول عبر خاصية onRowsRequest .
الدعائم المطلوبة :
| اسم | يكتب | وصف |
|---|---|---|
| onRowsRequest* | وظيفة غير متزامنة | يجب أن يُرجع وعدًا يتم حله إلى {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 }
/ >
)
} استخدم هذا التدفق إذا كنت بحاجة إلى جلب البيانات غير المتزامنة، وتريد أن يديرها react-grid-table داخليًا، ولكن لا يزال بإمكانك استخدامها في أماكن أخرى في التطبيق.
يتم توفير جميع البيانات إلى الجدول عبر الخاصية onRowsRequest ، ولكن يتم التحكم فيها بواسطة المكون الأصلي عبر الدعائم rows و onRowsChange و totalRows و onTotalRowsChange .
الدعائم المطلوبة :
| اسم | يكتب | وصف |
|---|---|---|
| onRowsRequest* | وظيفة غير متزامنة | يجب أن يُرجع وعدًا يتم حله إلى {rows, TotalRows} |
| صفوف* | مجموعة من الكائنات | بيانات الصفوف (التفاصيل) |
| onRowsChange* | وظيفة | يجب أن تستخدم لتعيين البيانات الحالية |
| إجمالي الصفوف* | رقم | يجب أن يحتوي على طول البيانات الحالية |
| أونتوتالروستشانج* | وظيفة | ينبغي أن تستخدم لتعيين طول البيانات الحالية |
مثال:
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 }
/ >
)
} استخدمه إذا كنت بحاجة إلى جلب البيانات غير المتزامنة وإدارتها بنفسك (مفيد عندما تكون هناك أماكن أخرى من المفترض أن تكون قادرة على جلب نفس البيانات).
يتم توفير جميع البيانات إلى الجدول عبر خاصية rows ، والتي يجب تحديثها باستخدام خاصية onRowsRequest .
ملحوظة : react-grid-table لن يطلب بالضرورة بيانات متزامنة، مما يعني أن "الثغرات" في البيانات ممكنة. يجب ملء هذه "الثقوب" بعناصر فارغة/غير محددة لضمان الأداء الوظيفي المناسب.
لتحقيق ذلك، يمكنك استخدام:
let mergedRows = tableManager . asyncApi . mergeRowsAt ( rows , fetchedRows , at )الدعائم المطلوبة :
| اسم | يكتب | وصف |
|---|---|---|
| onRowsRequest* | وظيفة غير متزامنة | يجب تحديث دعائم الصفوف حسب الطلب |
| صفوف* | مجموعة من الكائنات | بيانات الصفوف (التفاصيل) |
| إجمالي الصفوف* | رقم | يجب أن يحتوي على طول البيانات الحالية |
| إعادة تعيين الصفوف* | وظيفة | ينبغي أن تستخدم لإعادة تعيين البيانات الحالية. سيتم استدعاؤه عند تغيير الفرز أو نص البحث |
مثال:
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 ) }
> ✎ < / button >
) ,
editorCellRenderer : ( { tableManager , value , data , column , colIndex , rowIndex , onChange } ) => (
< div style = { { display : 'inline-flex' } } >
< button
style = { { marginLeft : 20 } }
onClick = { e => tableManager . rowEditApi . setEditRowId ( null ) }
> ✖ < / 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 ) ;
}
} > ✔ < / 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-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 |
© معهد ماساتشوستس للتكنولوجيا
