Thiết kế website giá rẻ

Question

When the first column hovers over the combobox it starts to flicker, when I scroll past the checkboxes it disappears completely.
I’ve tried style changes but that doesn’t help, I’ve searched on the internet, I haven’t found anything either. GPT chat doesn’t help either.
What can be done about this?

I have table in react:

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { DataGrid, GridActionsCellItem } from '@mui/x-data-grid';
import { Button, TextField, Dialog, DialogActions, DialogContent, DialogTitle, Checkbox, Box, MenuItem, Select } from '@mui/material';
import DeleteIcon from '@mui/icons-material/Delete';
import { saveAs } from 'file-saver';
import { tableStyles, columnModel } from './TableStyle'; // Import stylów

const Table = () => {
  const [data, setData] = useState([]);
  const [newRow, setNewRow] = useState({
    nazwa: '',
    comments: '',
    weight: '',
    type: '',
    t: false,
  });
  const [open, setOpen] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const token = localStorage.getItem('token');
        const response = await axios.post(`${process.env.REACT_APP_API_URL}/database`, {
          operation: 'fetch',
        }, {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        });
        const fetchedData = response.data.map((row, index) => ({
          id: row.id || index, // Ensure each row has a unique id
          ...row,
        }));
        setData(fetchedData);
      } catch (err) {
        console.error('Error fetching data', err);
      }
    };

    fetchData();
  }, []);

  const handleEditCellChange = async (newRow) => {
    const updatedRow = data.find((row) => row.id === newRow.id);
    if (updatedRow) {
      try {
        const token = localStorage.getItem('token');
        await axios.post(`${process.env.REACT_APP_API_URL}/database`, {
          operation: 'update',
          id: newRow.id,
          data: newRow,
        }, {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        });
        setData(data.map(row => (row.id === newRow.id ? newRow : row)));
      } catch (err) {
        console.error('Error updating data', err);
      }
    }
    return newRow;
  };

  const handleToggleCheckbox = async (id, field, value) => {
    const updatedRow = data.find((row) => row.id === id);
    if (updatedRow) {
      const updatedData = { ...updatedRow, [field]: value };
      try {
        const token = localStorage.getItem('token');
        await axios.post(`${process.env.REACT_APP_API_URL}/database`, {
          operation: 'update',
          id,
          data: updatedData,
        }, {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        });
        setData(data.map(row => (row.id === id ? updatedData : row)));
      } catch (err) {
        console.error('Error updating data', err);
      }
    }
  };

  const handleSelectChange = async (id, field, value) => {
    const updatedRow = data.find((row) => row.id === id);
    if (updatedRow) {
      const updatedData = { ...updatedRow, [field]: value };
      try {
        const token = localStorage.getItem('token');
        await axios.post(`${process.env.REACT_APP_API_URL}/database`, {
          operation: 'update',
          id,
          data: updatedData,
        }, {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        });
        setData(data.map(row => (row.id === id ? updatedData : row)));
      } catch (err) {
        console.error('Error updating data', err);
      }
    }
  };

  const handleAddRowChange = (e) => {
    const { name, value, type, checked } = e.target;
    setNewRow({
      ...newRow,
      [name]: type === 'checkbox' ? checked : value,
    });
  };

  const handleAddRow = async () => {
    try {
      const token = localStorage.getItem('token');
      const response = await axios.post(`${process.env.REACT_APP_API_URL}/database`, {
        operation: 'add',
        data: newRow,
      }, {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      });
      setData([...data, { ...newRow, id: response.data.id || data.length }]);
      setNewRow({
        nazwa: '',
        comments: '',
        weight: '',
        type: '',
        t: false,
      });
      setOpen(false);
    } catch (err) {
      console.error('Error adding row', err);
    }
  };

  const handleDeleteRow = async (id) => {
    try {
      const token = localStorage.getItem('token');
      await axios.post(`${process.env.REACT_APP_API_URL}/database`, {
        operation: 'delete',
        id,
      }, {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      });
      setData(data.filter(row => row.id !== id));
    } catch (err) {
      console.error('Error deleting data', err);
    }
  };

 const handleDownloadExcel = async () => {
    try {
        const token = localStorage.getItem('token');
        const response = await axios.post(`${process.env.REACT_APP_API_URL}/save-excel`, data, {
            headers: {
                Authorization: `Bearer ${token}`,
            },
            responseType: 'blob',
        });

        const blob = new Blob([response.data], {
            type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
        });
        saveAs(blob, 'data.xlsx');
    } catch (err) {
        console.error('Error downloading Excel file', err);
        alert(`Error downloading Excel file: ${err.message}`);
    }
};


  const getStageOptions = (type) => {
    switch (type) {
      case 'SZK':
        return ['H', 'U', 'S', 'US', 'C', 'CS', 'G', 'D', 'E'];
      case 'TAN':
        return ['300', '250', '200', '150', 'GRAT'];
      case 'ŚK':
        return ['40', '30', '25', 'GRAT', 'MY'];
      default:
        return [];
    }
  };

  const renderStageCell = (params) => {
    const options = getStageOptions(params.row.type);
    return (
      <Box>
        <Select
          value={params.value || ''}
          onChange={(event) => handleSelectChange(params.id, params.field, event.target.value)}
          fullWidth
        >
          {options.map((option) => (
            <MenuItem key={option} value={option}>{option}</MenuItem>
          ))}
        </Select>
      </Box>
    );
  };

  const columns = [
    { 
      field: 'nazwa', 
      headerName: 'Nazwa', 
      width: 200, 
      editable: true,
      cellClassName: 'MuiDataGrid-cell--stickyLeft',  // Klasa dla zablokowanej kolumny
      headerClassName: 'MuiDataGrid-columnHeader--stickyLeft',  // Klasa dla nagłówka zablokowanej kolumny
    },
    { field: 'comments', headerName: 'Comments', width: 120, editable: true },
    { field: 'weight', headerName: 'Weight', width: 80, editable: true },
    { 
      field: 'type', 
      headerName: 'Type', 
      width: 90, 
      editable: false, 
      renderCell: (params) => (
        <Box>
          <Select
            value={params.value}
            onChange={(event) => handleSelectChange(params.id, 'type', event.target.value)}
            fullWidth
          >
            <MenuItem value="SZK">SZK</MenuItem>
            <MenuItem value="TAN">TAN</MenuItem>
            <MenuItem value="ŚK">ŚK</MenuItem>
          </Select>
        </Box>
      )
    },
    { 
      field: 't', 
      headerName: 'T', 
      width: 50, 
      editable: false, 
      type: 'boolean',
      renderCell: (params) => (
        <Box>
          <Checkbox 
            checked={Boolean(params.value)} 
            onChange={(event) => handleToggleCheckbox(params.id, params.field, event.target.checked)} 
          />
        </Box>
      )
    },
    ...Array.from({ length: 20 }, (_, i) => ({ field: `stage1_${i + 1}`, headerName: `${i + 1}`, width: 90, editable: true, renderCell: renderStageCell })),
    ...Array.from({ length: 15 }, (_, i) => ({ field: `stage2_${i + 1}`, headerName: `${i + 1}`, width: 90, editable: true, renderCell: renderStageCell })),
    {
      field: 'actions',
      type: 'actions',
      width: 100,
      getActions: (params) => [
        <GridActionsCellItem
          icon={<DeleteIcon />}
          label="Delete"
          onClick={() => handleDeleteRow(params.id)}
        />
      ]
    }
  ];

  return (
    <div style={{ height: '100%', width: '100%' }}>
      <Box sx={{ height: '100%', width: '100%' }}>
        <DataGrid
          rows={data}
          columns={columns}
          processRowUpdate={handleEditCellChange}
          columnGroupingModel={columnModel}
          sx={tableStyles.root} // Użycie stylów z osobnego pliku
          pinnedColumns={{ left: ['nazwa'] }} // Przypięcie pierwszej kolumny do lewej strony
        />
      </Box>
      <Button variant="contained" color="primary" onClick={() => setOpen(true)} style={{ marginTop: 20 }}>
        Add Row
      </Button>
      <Button variant="contained" color="secondary" onClick={handleDownloadExcel} style={{ marginTop: 20, marginLeft: 20 }}>
        Download Excel
      </Button>
      <Dialog open={open} onClose={() => setOpen(false)}>
        <DialogTitle>Add New Row</DialogTitle>
        <DialogContent>
          <TextField
            autoFocus
            margin="dense"
            name="nazwa"
            label="Nazwa"
            type="text"
            fullWidth
            value={newRow.nazwa}
            onChange={handleAddRowChange}
          />
          <TextField
            margin="dense"
            name="comments"
            label="Comments"
            type="text"
            fullWidth
            value={newRow.comments}
            onChange={handleAddRowChange}
          />
          <TextField
            margin="dense"
            name="weight"
            label="Weight"
            type="text"
            fullWidth
            value={newRow.weight}
            onChange={handleAddRowChange}
          />
          <Select
            name="type"
            value={newRow.type}
            onChange={handleAddRowChange}
            fullWidth
          >
            <MenuItem value="SZK">SZK</MenuItem>
            <MenuItem value="TAN">TAN</MenuItem>
            <MenuItem value="ŚK">ŚK</MenuItem>
          </Select>
          <Checkbox
            name="t"
            checked={newRow.t}
            onChange={handleAddRowChange}
          /> T
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setOpen(false)} color="primary">
            Cancel
          </Button>
          <Button onClick={handleAddRow} color="primary">
            Add
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
};

export default Table;

and style for this:

export const tableStyles = {
  root: {
    '& .MuiDataGrid-root': {
      scrollSnapType: 'x mandatory',
    },
    '& .MuiDataGrid-row': {
      scrollSnapAlign: 'start',
    },
    '& .MuiDataGrid-row:nth-of-type(odd)': {
      backgroundColor: '#f5f5f5', // Alternatywne kolory wierszy
    },
    '& .MuiDataGrid-cell--stickyLeft': {
      position: 'sticky',
      left: 0,
      backgroundColor: 'white',
      zIndex: 1, // Zmniejszenie z-index
      borderRight: '1px solid #ddd',
    },
    '& .MuiDataGrid-columnHeaders .MuiDataGrid-columnHeader--stickyLeft': {
      position: 'sticky',
      left: 0,
      backgroundColor: 'white',
      zIndex: 1, // Zmniejszenie z-index
      borderRight: '1px solid #ddd',
    },
    '& .MuiDataGrid-cell:not(.MuiDataGrid-cell--stickyLeft)': {
      zIndex: 0, // Ustawienie z-index: 0 dla wszystkich komórek poza pierwszą kolumną
    },
    '& .MuiDataGrid-cell:not(.MuiDataGrid-cell--stickyLeft) *': {
      zIndex: 0, // Ustawienie z-index: 0 dla wszystkich elementów wewnątrz komórek poza pierwszą kolumną
    },
    '& .MuiDataGrid-columnHeaders .MuiDataGrid-columnHeader:not(.MuiDataGrid-columnHeader--stickyLeft)': {
      zIndex: 0, // Ustawienie z-index: 0 dla nagłówków kolumn innych niż pierwsza
    },
    '& .MuiDataGrid-columnHeaders .MuiDataGrid-columnHeader:not(.MuiDataGrid-columnHeader--stickyLeft) *': {
      zIndex: 0, // Ustawienie z-index: 0 dla wszystkich elementów wewnątrz nagłówków kolumn innych niż pierwsza
    },
    '& .MuiDataGrid-columnHeaderTitleContainer.MuiDataGrid-withBorderColor': {
      zIndex: 0, // Ustawienie z-index: 0 dla obiektów o klasie MuiDataGrid-columnHeaderTitleContainer MuiDataGrid-withBorderColor
    },
    '& .MuiDataGrid-columnHeaderTitleContainer.MuiDataGrid-withBorderColor *': {
      zIndex: 0, // Ustawienie z-index: 0 dla zawartości obiektów o klasie MuiDataGrid-columnHeaderTitleContainer MuiDataGrid-withBorderColor
    },
  },
};

Thiết kế website giá rẻ

Danh mục

Flickering when scrolling left when first column frozen DataGrid