🚀 ReactJs - table gridview datatable gridcontrol autofilter görüntüleme

Ramazan HABER / ReactJs / table gridview datatable gridcontrol autofilter görüntüleme

1-) ReactJs - table gridview datatable gridcontrol autofilter görüntüleme

https://www.material-react-table.com

1- EKRAN GÖRÜNTÜSÜ

2- KODLAR

import { useMemo } from 'react';

import {

MaterialReactTable,

useMaterialReactTable,

} from 'material-react-table';

import DeleteIcon from '@mui/icons-material/Delete';

import EditIcon from '@mui/icons-material/Edit';

import { Divider, MenuItem } from '@mui/material';

import { Box, IconButton } from '@mui/material';

const data = [

{

dokumanKodu: 'A.1',

dokumanAdı: 'Rmos Örnek Döküman Adı',

revizyonNo: 'East Daphne',

dokumanSahibi: 'Kentucky',

ilgiliBolum: 'Kentucky',

hazırlamaTarihi: '20/01/2020',

revizyonTarihi: '20/01/2020',

onayTarihi: '20/01/2020',

hazirlayanKisi: 'Tokuç',

kontrolEden: 'Tokuç',

gozdenGecirecek: 'Tokuç',

revizeEden: 'Tokuç',

onaylayanlar: 'Tokuç',

{

dokumanKodu: 'A.1',

dokumanAdı: 'Proje Planı',

revizyonNo: '1.0',

dokumanSahibi: 'John Doe',

ilgiliBolum: 'Proje Yönetimi',

hazırlamaTarihi: '01/02/2023',

revizyonTarihi: '15/03/2023',

onayTarihi: '25/03/2023',

hazirlayanKisi: 'Alice Smith',

kontrolEden: 'Bob Johnson',

gozdenGecirecek: 'Charlie Brown',

revizeEden: 'David Miller',

onaylayanlar: 'Eve Wilson',

{

dokumanKodu: 'B.2',

dokumanAdı: 'Test Raporu',

revizyonNo: '2.5',

dokumanSahibi: 'Jane Doe',

ilgiliBolum: 'Test Departmanı',

hazırlamaTarihi: '10/04/2023',

revizyonTarihi: '22/04/2023',

onayTarihi: '01/05/2023',

hazirlayanKisi: 'Frank White',

kontrolEden: 'Grace Davis',

gozdenGecirecek: 'Harry Black',

revizeEden: 'Ivy Green',

onaylayanlar: 'Jack Red',

{

dokumanKodu: 'C.3',

dokumanAdı: 'Strateji Belgesi',

revizyonNo: '3.2',

dokumanSahibi: 'Robert Smith',

ilgiliBolum: 'Strateji Departmanı',

hazırlamaTarihi: '05/06/2023',

revizyonTarihi: '18/06/2023',

onayTarihi: '30/06/2023',

hazirlayanKisi: 'Olivia Brown',

kontrolEden: 'Peter Green',

gozdenGecirecek: 'Quincy White',

revizeEden: 'Rachel Black',

onaylayanlar: 'Samuel Davis',

{

dokumanKodu: 'D.4',

dokumanAdı: 'Güvenlik Politikası',

revizyonNo: '1.5',

dokumanSahibi: 'Emily Johnson',

ilgiliBolum: 'Güvenlik Departmanı',

hazırlamaTarihi: '12/07/2023',

revizyonTarihi: '28/07/2023',

onayTarihi: '05/08/2023',

hazirlayanKisi: 'Daniel Black',

kontrolEden: 'Catherine White',

gozdenGecirecek: 'Bryan Red',

revizeEden: 'Audrey Green',

onaylayanlar: 'Henry Davis',

{

dokumanKodu: 'E.5',

dokumanAdı: 'Pazarlama Stratejisi',

revizyonNo: '2.1',

dokumanSahibi: 'Michael Brown',

ilgiliBolum: 'Pazarlama Departmanı',

hazırlamaTarihi: '10/09/2023',

revizyonTarihi: '25/09/2023',

onayTarihi: '03/10/2023',

hazirlayanKisi: 'Samantha White',

kontrolEden: 'George Red',

gozdenGecirecek: 'Victoria Black',

revizeEden: 'Nathan Davis',

onaylayanlar: 'Emma Green',

{

dokumanKodu: 'F.6',

dokumanAdı: 'İnsan Kaynakları Politikası',

revizyonNo: '1.8',

dokumanSahibi: 'Oliver Davis',

ilgiliBolum: 'İnsan Kaynakları',

hazırlamaTarihi: '15/11/2023',

revizyonTarihi: '30/11/2023',

onayTarihi: '10/12/2023',

hazirlayanKisi: 'Isabella Black',

kontrolEden: 'William Green',

gozdenGecirecek: 'Sophia Davis',

revizeEden: 'Jackson Red',

onaylayanlar: 'Ava White',

{

dokumanKodu: 'G.7',

dokumanAdı: 'Finansal Rapor',

revizyonNo: '3.3',

dokumanSahibi: 'Ethan Green',

ilgiliBolum: 'Finans Departmanı',

hazırlamaTarihi: '02/01/2024',

revizyonTarihi: '15/01/2024',

onayTarihi: '28/01/2024',

hazirlayanKisi: 'Madison Red',

kontrolEden: 'Logan White',

gozdenGecirecek: 'Aiden Black',

revizeEden: 'Grace Davis',

onaylayanlar: 'Lucas Green',

{

dokumanKodu: 'H.8',

dokumanAdı: 'Ürün Geliştirme Stratejisi',

revizyonNo: '2.7',

dokumanSahibi: 'Chloe White',

ilgiliBolum: 'Ar-Ge Departmanı',

hazırlamaTarihi: '08/03/2024',

revizyonTarihi: '20/03/2024',

onayTarihi: '02/04/2024',

hazirlayanKisi: 'Liam Davis',

kontrolEden: 'Zoe Black',

gozdenGecirecek: 'Mia Green',

revizeEden: 'Elijah Red',

onaylayanlar: 'Lily White',

];

const DokumanGorme = () => {

//should be memoized or stable

const columns = useMemo(

() => [

{

accessorKey: 'dokumanKodu', //access nested data with dot notation

header: <div style={{textAlign:"center"}}>Döküman <br/> Kodu</div>,

size:0

{

accessorKey: 'dokumanAdı',

header: <div style={{textAlign:"center"}}>Döküman <br/> Adı</div>,

size:0

{

accessorKey: 'revizyonNo',

header: <div style={{textAlign:"center"}}>Revizyon <br/> No</div>,

size:0,

{

accessorKey: 'dokumanSahibi',

header: <div style={{textAlign:"center"}}>Döküman <br/> Sahibi</div>,

size: 0,

{

accessorKey: 'ilgiliBolum',

header: <div style={{textAlign:"center"}}>İlgili <br/> Bölüm</div>,

size: 0,

{

accessorKey: 'hazırlamaTarihi',

header: <div style={{textAlign:"center"}}>Hazırlama <br/> Tarihi</div>,

size: 0,

{

accessorKey: 'revizyonTarihi',

header: <div style={{textAlign:"center"}}>Revizyon<br/>Tarihi</div>,

size: 0,

{

accessorKey: 'onayTarihi',

header: <div style={{textAlign:"center"}}>Onay <br/> Tarihi</div>,

size: 0,

{

accessorKey: 'hazirlayanKisi',

header: <div style={{textAlign:"center"}}>Hazırlayan <br/>Kişi</div>,

size: 0,

{

accessorKey: 'kontrolEden',

header: <div style={{textAlign:"center"}}>Kontrol <br/> Eden</div>,

size: 0,

{

accessorKey: 'gozdenGecirecek',

header: <div style={{textAlign:"center"}}>Gözden <br/> Geçirecek</div>,

size: 0,

{

accessorKey: 'revizeEden',

header: <div style={{textAlign:"center"}}>Revize <br/> Eden</div>,

size: 0,

{

accessorKey: 'onaylayanlar',

header: <div style={{textAlign:"center"}}>Onay</div>,

size: 10,

{

accessorKey: 'actions',

header: <div style={{textAlign: "center"}}>Actions</div>,

size: 10,

Cell: (row) => (

<IconButton onClick={() => handleEdit(row)}>

</IconButton>

<IconButton onClick={() => handleDelete(row)}>

</IconButton>

</div>

[],

);

const handleEdit = (rowData) => {

alert(`Edit Row: ${JSON.stringify(rowData.row.original)}`);

};

const handleDelete = (rowData) => {

alert(`delete Row: ${JSON.stringify(rowData.row.original)}`);

};

const table = useMaterialReactTable({

columns,

data,

initialState: { density: 'compact',showColumnFilters: true },

});

return <MaterialReactTable layoutMode={"grid"} table={table}

};

export default DokumanGorme;

3- APİ İLE

import { useMemo, useEffect, useState } from 'react';

import {

MaterialReactTable,

useMaterialReactTable,

} from 'material-react-table';

import DeleteIcon from '@mui/icons-material/Delete';

import EditIcon from '@mui/icons-material/Edit';

import { IconButton, Button } from '@mui/material';

import * as XLSX from 'xlsx';

import jsPDF from 'jspdf';

import 'jspdf-autotable';

const DokumanGorme = () => {

const [apiData, setApiData] = useState([]);

useEffect(() => {

// API'den veri çekme işlemi

const fetchData = async () => {

try {

const response = await fetch('http://apilink/api/UsersYetki/get?userId=1');

const data = await response.json();

setApiData(data);

} catch (error) {

console.error('Error fetching data:', error);

}

};

fetchData();

}, []);

const columns = useMemo(() => {

if (apiData.length === 0) return [];

const columnKeys = Object.keys(apiData[0]);

const actionColumn = {

accessorKey: 'actions',

header: <div style={{ textAlign: 'center' }}>Actions</div>,

size: 10,

Cell: (row) => (

<IconButton onClick={() => handleEdit(row.row.original)}>

</IconButton>

<IconButton onClick={() => handleDelete(row.row.original)}>

</IconButton>

</div>

};

const booleanColumn = (key) => ({

accessorKey: key,

header: key,

size: 0,

Cell: (row) => (

{typeof row.row.original[key] === 'boolean'

? row.row.original[key].toString()

: row.row.original[key]}

</div>

});

return [

...columnKeys.map((key) => {

if (typeof apiData[0][key] === 'boolean') {

return booleanColumn(key);

}

return { accessorKey: key, header: key, size: 0 };

}),

actionColumn,

];

}, [apiData]);

const handleEdit = (rowData) => {

alert(`Edit Row: ${JSON.stringify(rowData)}`);

};

const handleDelete = (rowData) => {

alert(`Delete Row: ${JSON.stringify(rowData)}`);

};

const exportToExcel = () => {

const excelData = apiData.map((item) => ({ ...item }));

const workbook = XLSX.utils.book_new();

const worksheet = XLSX.utils.json_to_sheet(excelData);

XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet 1');

XLSX.writeFile(workbook, 'user_data.xlsx');

};

const exportToPDF = () => {

const pdf = new jsPDF();

const header = columns.map((column) => column.header);

pdf.autoTable({

head: [header],

body: apiData.map((item) => columns.map((column) => item[column.accessorKey])),

});

pdf.save('user_data.pdf');

};

const table = useMaterialReactTable({

columns,

data: apiData,

initialState: { density: 'compact', showColumnFilters: true },

});

return (

<div>

Export to Excel

</Button>

Export to PDF

</Button>

</div>

);

};

export default DokumanGorme;

2024 Ocak 10 Çarşamba
240