update basic number input

src/components/Table/Inputs/NumberInput.tsx

@@ -0,0 +1,25 @@
+import React, { type ChangeEventHandler } from 'react';
+
+interface Props {
+  onChange: (value: string | string[] | number | number[] | null) => void;
+  keyData: string;
+}
+
+export default function NumberInput({ keyData, onChange }: Props): JSX.Element {
+  const onSelectChange: ChangeEventHandler<HTMLInputElement> = ({
+    target,
+  }): void => {
+    const value = parseInt(target.value);
+    onChange(isNaN(value) ? null : value);
+  };
+
+  return (
+    <input
+      name={`number-input-${keyData}`}
+      id="foo"
+      type="number"
+      placeholder="1"
+      onChange={onSelectChange}
+    />
+  );
+}

src/components/Table/Inputs/SelectInput.tsx

@@ -1,6 +1,5 @@
 import React, { useMemo, type ChangeEventHandler } from 'react';
-
-export type DataItem = Record<string, any>;
+import type { DataItem } from '.';
 
 interface Props {
   onChange: (value: string | string[] | null) => void;
@@ -9,7 +8,7 @@ interface Props {
   isMultiple?: boolean;
 }
 
-export default function Select({
+export default function SelectInput({
   data,
   keyData,
   isMultiple = false,

src/components/Table/Inputs/index.tsx

@@ -0,0 +1,4 @@
+export { default as SelectInput } from './SelectInput.tsx';
+export { default as NumberInput } from './NumberInput.tsx';
+
+export type DataItem = Record<string, any>;

src/components/Table/Table.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo, useState } from 'react';
 import usePagination, { Offset } from 'src/hooks/usePagination';
-import Select from './Inputs/Select';
+import { SelectInput, NumberInput } from './Inputs';
 
 export type DataItem = Record<string, any>;
 
@@ -26,7 +26,7 @@ interface Props {
 
 interface Filter {
   type: HeaderType;
-  value: string | string[];
+  value: string | string[] | number | number[];
 }
 
 export default function Table({ data, headers }: Props): JSX.Element {
@@ -119,20 +119,16 @@ export default function Table({ data, headers }: Props): JSX.Element {
         );
       case HeaderType.Number:
         return (
-          <input
-            type="number"
-            onChange={(e) => {
-              handleUpdateFilters(
-                header.key,
-                header.type,
-                e.target.value !== '' ? parseInt(e.target.value) : null,
-              );
+          <NumberInput
+            keyData={header.key}
+            onChange={(value) => {
+              handleUpdateFilters(header.key, header.type, value);
             }}
           />
         );
       case HeaderType.Select:
         return (
-          <Select
+          <SelectInput
             data={data}
             keyData={header.key}
             onChange={(value) => {
@@ -142,7 +138,7 @@ export default function Table({ data, headers }: Props): JSX.Element {
         );
       case HeaderType.Multiple:
         return (
-          <Select
+          <SelectInput
             isMultiple
             data={data}
             keyData={header.key}