import React, { useState } from 'react';

const DataTable = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [data, setData] = useState([
    { name: 'computer', amt: 5000 },
    { name: 'Laptop', amt: 15000 },
    { name: 'electricity', amt: 200000 },
    // ... other data
  ]);

  const handleSearchChange = (event) => {
    setSearchTerm(event.target.value);
  };

  const getFilteredData = () => {
    return data.filter(item =>
      item.name.toLowerCase().includes(searchTerm.toLowerCase())
    );
  };

  return (
    <div>
      <input
        type="search"
        className="search form-control"
        placeholder="Search Category Here..."
        spellCheck="false"
        data-ms-editor="true"
        onChange={handleSearchChange}
        // ... other styles
      />
      <hr />
      <div class="table-responsive">
        <table class="table header-border table-hover table-custom spacing5">
          <thead>
            <tr>
              <th>Name</th>
              <th>Amt</th>
              <th>#</th>
            </tr>
          </thead>
          <tbody>
            {getFilteredData().map((item, index) => (
              <tr key={index}>
                <td>{item.name}</td>
                <td><span>{item.amt.toLocaleString()}</span></td>
                <td>⋮</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default DataTable;