import {
  DataSheetGrid,
  checkboxColumn,
  textColumn,
  keyColumn,
} from 'react-datasheet-grid'

import 'react-datasheet-grid/dist/style.css'

const Example = () => {
  const [ data, setData ] = useState([
    { active: true, firstName: 'Elon', lastName: 'Musk' },
    { active: false, firstName: 'Jeff', lastName: 'Bezos' },
  ])

  const columns = [
    {
      ...keyColumn('active', checkboxColumn),
      title: 'Active',
    },
    {
      ...keyColumn('firstName', textColumn),
      title: 'First name',
    },
    {
      ...keyColumn('lastName', textColumn),
      title: 'Last name',
    },
  ]

  return (
    <DataSheetGrid
      value={data}
      onChange={setData}
      columns={columns}
    />
  )
}

function stringChanger(str) {
    let result = ""
    let letters = ["а", "е", "ё", "и", "о", "у", "ы", "э", "ю", "я"]
    
    for (let i = 0; i < str.length; i += 1) {
        if (letters.includes(str[i].toLowerCase())) {
            result = result + str[i].toUpperCase()
        } else {
        result = result + str[i].toLowerCase()
        }
    }
    return result
}
  
console.log(stringChanger("Привет Мир")) // "прИвЕт мИр"
console.log(stringChanger("Азбука Вкуса")) // "АзбУкА вкУсА"

.canvas {
  background: var(--gradient);
  mask: var(--dots), var(--noise);
  mask-composite: intersect /* source-in, xor */;
  animation: flicker;
}
@keyframes flicker {
  to { mask-position: 50% 50% , 0 50%; }
}

mask: radial-gradient(circle at 50% 50%, white 2px, transparent 2.5px) 50% 50% / 40px 40px;

mask: url("noise.png") 50% 50% / 256px 256px;

input:valid { --valid: 1; }
input {
    background: var(--bg) padding-box, ...,
    var(--valid-bg) calc((1 - var(--valid)) * 100cqi) 0 /
    100% 100% border-box;
}

@media (prefers-reduced-motion: no-preference) {
    input { transition: background-position: 0.5s; }
}