Selectable Rows Table

export function SelectableTable({ rows, selected, onToggle, onToggleAll }) {
  const allChecked = rows.length > 0 && selected.length === rows.length;
  return (
    <table className="w-full text-left text-sm">
      <thead className="border-b border-slate-200 text-slate-500">
        <tr>
          <th className="w-10 px-4 py-3">
            <input type="checkbox" checked={allChecked} onChange={onToggleAll} />
          </th>
          <th className="px-4 py-3 font-medium">Name</th>
          <th className="px-4 py-3 font-medium">Status</th>
        </tr>
      </thead>
      <tbody className="divide-y divide-slate-100">
        {rows.map((row) => (
          <tr key={row.id} className={selected.includes(row.id) ? "bg-indigo-50/60" : ""}>
            <td className="px-4 py-3">
              <input
                type="checkbox"
                checked={selected.includes(row.id)}
                onChange={() => onToggle(row.id)}
              />
            </td>
            <td className="px-4 py-3 text-slate-700">{row.name}</td>
            <td className="px-4 py-3 text-slate-500">{row.status}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}