در این مقاله قصد دارم شمارو را با امکانات لایبرری "ری اکت انگرید " برای ری اکت جی اس آشنا کنم. این لایبرری شامل یک کامپوننت گرید با قابلیتهای زیر هست:
3- در نهایت کامپوننت مورد نظر:
نمایی از گرید:
1-ساپورت راست به چپ
2- نمایش پیجینگ
3- نمایش لودر
4- امکان تغییر کلمات
5- امکان جاگذاری کامپوننت در هر سل
نحوه استفاده از این کامپوننت به این شکل هست:
1- تعریف ستونها:
2- تعریف استیتهای لازم برا ست کردن سطر ها، لودر، تعداد کل, شماره صفحه و بزرگی هر صفحه(دقت شود که امکان استفاده بدون پیجینگ هم وجود دارد و امکانات کامل را در لینک لایبرری میتوانید مطالعه نمایید)
نحوه استفاده از این کامپوننت به این شکل هست:
1- تعریف ستونها:
const columns = [ { field: "fullname", headerName: "First & last Name", description: "name of user", width: 50, }, { field: "age", headerName: "Age", description: "age of user", width: 50, renderCell:(info)=><strong>Age is : {info.data.age}</strong> } ]
2- تعریف استیتهای لازم برا ست کردن سطر ها، لودر، تعداد کل, شماره صفحه و بزرگی هر صفحه(دقت شود که امکان استفاده بدون پیجینگ هم وجود دارد و امکانات کامل را در لینک لایبرری میتوانید مطالعه نمایید)
... const [rows,setRows] = useState([]); const [loading,setLoading] = useState(false); const [totalCount,setTotalCount] = useState(0);
const [filter,setFilter] = useState({ pageSize:10, pageNumber:1 });
const _fetchData = async () => { if (!active) return; //mock api, you can call your api then set data to table like commented line below return new Promise((resolve) => { setLoading(true); setTimeout(() => { setRows(data);// SetRows, note that data comes from api and must be array of objects setTotalCount(7);//=== set total page size for pagination part resolve(); setLoading(false); }, 2000); }); }
import Angrid from "rect-angrid"; ... _handlePageChange = (newPage)=>{ setFilter(p=>({...p,pageNumber:newPage})) } ... <AnGrid loading={loading} columns={columns} rows={rows} showRowNumber={true} pageSize={filter.pageSize} pageNumber={filter.pageNumber} totalCount={totalCount} onPageChange={_handlePageChange} theme="dark" minHeight={300} emptyList={<strong>There Is No Info</strong>} />