Merge pull request #126 from Kuechlin/next

diff --git a/docs/pages/Demo.tsx b/docs/pages/Demo.tsx
@@ -136,7 +136,7 @@ export default function Demo() {
       <Grid.Col span={10} p="md">
         <DataGrid<Data>
           debug
-          data={state.showEmpty ? [] : state.withPagination ? demoData : demoData.slice(0, 25)}
+          data={state.showEmpty ? [] : state.withPagination ? demoData : demoData.slice(0, 30)}
           horizontalSpacing={state.horizontalSpacing}
           verticalSpacing={state.verticalSpacing}
           fontSize={state.fontSize}

diff --git a/docs/pages/Properties.tsx b/docs/pages/Properties.tsx
@@ -1,4 +1,4 @@
-import { Stack, Title, Text } from '@mantine/core';
+import { Stack, Text, Title } from '@mantine/core';
 import { PropertyTable } from '../components/PropertyTable';
 import { See } from '../components/See';
 
@@ -109,11 +109,6 @@ export default function Properties() {
                 type: 'boolean',
                 description: 'Disable flex layout',
               },
-              {
-                name: 'noEllipsis',
-                type: 'boolean',
-                description: 'Disable Text overflow ellipsis',
-              },
               {
                 name: 'debug',
                 type: 'boolean',

diff --git a/docs/pages/examples/AsyncExample.tsx b/docs/pages/examples/AsyncExample.tsx
@@ -34,27 +34,29 @@ function fetchData(page: number, pageSize: number, search: string): Promise<Fetc
 export default function AsyncExample() {
   const [loading, setLoading] = useState(false);
   const [data, setData] = useState<FetchResponse>({ list: [], total: 0 });
+  const [pagination, setPagination] = useState<DataGridPaginationState>({ pageIndex: 0, pageSize: 10 });
   const [searchValue, setSearchValue] = useState<string>('');
 
   const load: OnChangeCallback<DataGridPaginationState> = async ({ pageIndex, pageSize }) => {
     console.log(`pageIndex: ${pageIndex}, pageSize: ${pageSize}`);
     setLoading(true);
     const res = await fetchData(pageIndex, pageSize, searchValue);
     setData(res);
+    setPagination({ pageIndex, pageSize });
     setLoading(false);
   };
 
   const search: OnChangeCallback<string> = async (val) => {
     console.log(`search`);
     setLoading(true);
-    const res = await fetchData(0, 10, val);
+    const res = await fetchData(0, pagination.pageSize, val);
     setData(res);
     setSearchValue(val);
     setLoading(false);
   };
 
   useEffect(() => {
-    load({ pageIndex: 0, pageSize: 10 });
+    load(pagination);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -67,6 +69,7 @@ export default function AsyncExample() {
       withPagination
       withGlobalFilter
       loading={loading}
+      state={{ pagination }}
       columns={[
         {
           accessorKey: 'id',

diff --git a/docs/pages/examples/EditableExample.tsx b/docs/pages/examples/EditableExample.tsx
@@ -0,0 +1,89 @@
+import { TextInput } from '@mantine/core';
+import { CellContext } from '@tanstack/react-table';
+import { useCallback, useEffect, useState } from 'react';
+import { booleanFilterFn, DataGrid, dateFilterFn, numberFilterFn, stringFilterFn } from '../../../src';
+import { Data, demoData } from '../../demoData';
+
+export default function EditableExample() {
+  const [data, setData] = useState(demoData.slice(0, 25));
+
+  const handleChange = useCallback(
+    (index: number, key: keyof Data, value: string) => {
+      setData((state) => {
+        const next = [...state];
+        next[index] = {
+          ...state[index],
+          [key]: value,
+        };
+        return next;
+      });
+    },
+    [setData]
+  );
+
+  return (
+    <DataGrid
+      data={data}
+      striped
+      highlightOnHover
+      withGlobalFilter
+      withPagination
+      withColumnFilters
+      withSorting
+      withColumnResizing
+      columns={[
+        {
+          accessorKey: 'text',
+          header: 'Text that is too long for a Header',
+          filterFn: stringFilterFn,
+          size: 300,
+          cell: (cell) => <CellInput {...cell} onChange={handleChange} />,
+        },
+        {
+          header: 'Animal',
+          columns: [
+            { accessorKey: 'cat', filterFn: stringFilterFn },
+            {
+              accessorKey: 'fish',
+              filterFn: stringFilterFn,
+            },
+          ],
+        },
+        {
+          accessorKey: 'city',
+          filterFn: stringFilterFn,
+        },
+        { accessorKey: 'value', filterFn: numberFilterFn },
+        {
+          accessorKey: 'date',
+          cell: (cell) => cell.getValue<Date>()?.toLocaleDateString(),
+          filterFn: dateFilterFn,
+        },
+        {
+          accessorKey: 'bool',
+          filterFn: booleanFilterFn,
+        },
+      ]}
+    />
+  );
+}
+
+// https://tanstack.com/table/v8/docs/examples/react/editable-data
+function CellInput<T>({
+  getValue,
+  onChange,
+  row: { index },
+  column: { id },
+}: CellContext<T, unknown> & { onChange(rowIndex: number, columnId: string, value: unknown): void }) {
+  const initialValue = getValue<string>();
+  const [value, setValue] = useState(initialValue);
+  useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+
+  const hanldeBlur = () => {
+    onChange(index, id, value);
+  };
+
+  return <TextInput value={value} onChange={(e) => setValue(e.target.value)} onBlur={hanldeBlur} />;
+}
diff --git a/docs/pages/examples/index.ts b/docs/pages/examples/index.ts
@@ -59,6 +59,10 @@ import CustomPaginationExample from './CustomPaginationExample';
 // @ts-ignore
 import CustomPaginationExampleCode from './CustomPaginationExample.tsx?raw';
 
+import EditableExample from './EditableExample';
+// @ts-ignore
+import EditableExampleCode from './EditableExample.tsx?raw';
+
 export type Example = {
   label: string;
   path: string;
@@ -158,4 +162,10 @@ export const examples = {
     element: CustomPaginationExample,
     code: CustomPaginationExampleCode,
   }),
+  editable: ex({
+    label: 'Editable Cell',
+    path: '/example/editable',
+    element: EditableExample,
+    code: EditableExampleCode,
+  }),
 };
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mantine-data-grid",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "homepage": "https://kuechlin.github.io/mantine-data-grid/",
   "repository": {
     "type": "git",

diff --git a/src/ColumnFilter.tsx b/src/ColumnFilter.tsx
@@ -67,8 +67,15 @@ export const ColumnFilter = ({ column, className, color }: ColumnFilterProps) =>
             <Element filter={state.value} onFilterChange={change} />
 
             <Group position="apart">
-              <Button children={<X />} color="gray" onClick={clear} compact />
-              <Button children={<Check />} onClick={save} compact variant="outline" />
+              <Button children={<X />} color="gray" onClick={clear} compact type="reset" aria-label="Reste Filter" />
+              <Button
+                children={<Check />}
+                onClick={save}
+                compact
+                variant="outline"
+                type="submit"
+                aria-label="Save Filter"
+              />
             </Group>
           </Stack>
         )}

diff --git a/src/DataGrid.styles.ts b/src/DataGrid.styles.ts
@@ -86,6 +86,10 @@ export default createStyles(
         backgroundColor: theme.colors.dark[5],
       },
     },
+    isResizing: {
+      userSelect: 'none',
+      backgroundColor: theme.fn.primaryColor(theme.colorScheme),
+    },
     sorter: {},
     filter: {},
     globalFilter: {},

diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
@@ -237,11 +237,18 @@ export function DataGrid<TData extends RowData>({
   const defaultPageSize = Number(pageSizes?.[0] ?? DEFAULT_INITIAL_SIZE);
   useEffect(() => {
     if (withPagination) {
-      table.setPageSize(initialState?.pagination?.pageSize ?? defaultPageSize);
+      table.setPageSize(state?.pagination?.pageSize ?? initialState?.pagination?.pageSize ?? defaultPageSize);
     } else {
       table.setPageSize(data.length);
     }
-  }, [table, withPagination, data.length, initialState?.pagination?.pageSize, defaultPageSize]);
+  }, [
+    table,
+    withPagination,
+    data.length,
+    initialState?.pagination?.pageSize,
+    defaultPageSize,
+    state?.pagination?.pageSize,
+  ]);
 
   const tableContainerRef = useRef<HTMLDivElement>(null);
 
@@ -257,7 +264,7 @@ export function DataGrid<TData extends RowData>({
 
   const paddingTop = virtualRows?.[0]?.start || 0;
   const paddingBottom = totalSize - (virtualRows?.[virtualRows.length - 1]?.end || 0);
-  const colSpan = rows?.[0].getVisibleCells().length ?? 1;
+  const colSpan = rows?.[0]?.getVisibleCells().length ?? 1;
 
   return (
     <Stack {...others} spacing={verticalSpacing} className={classes.wrapper}>
@@ -319,7 +326,7 @@ export function DataGrid<TData extends RowData>({
                         </div>
                         {header.column.getCanResize() && (
                           <div
-                            className={classes.resizer}
+                            className={cx(classes.resizer, { [classes.isResizing]: header.column.getIsResizing() })}
                             onClick={(e) => e.stopPropagation()}
                             onMouseDown={header.getResizeHandler()}
                             onTouchStart={header.getResizeHandler()}

diff --git a/src/filters/booleanFilter.tsx b/src/filters/booleanFilter.tsx
@@ -78,9 +78,9 @@ export const createBooleanFilter = ({
       <>
         {title && <Text>{title}</Text>}
         {variant === 'segmented' ? (
-          <BooleanSegmentedInput trueLabel={trueLabel} falseLabel={falseLabel} {...props} />
+          <BooleanSegmentedInput trueLabel={trueLabel} falseLabel={falseLabel} {...props} aria-label="Filter value" />
         ) : (
-          <BooleanRadioInput trueLabel={trueLabel} falseLabel={falseLabel} {...props} />
+          <BooleanRadioInput trueLabel={trueLabel} falseLabel={falseLabel} {...props} aria-label="Filter value" />
         )}
       </>
     );

diff --git a/src/filters/dateFilter.tsx b/src/filters/dateFilter.tsx
@@ -1,9 +1,9 @@
 import { Checkbox, Select, Text } from '@mantine/core';
-import { DatePicker, DateRangePicker, DateRangePickerValue, TimeInput, TimeRangeInput } from '@mantine/dates';
+import { DatePicker, DateRangePicker, TimeInput, TimeRangeInput } from '@mantine/dates';
 import dayjs from 'dayjs';
-import { Filter } from 'tabler-icons-react';
-import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
 import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
+import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
+import { Filter } from 'tabler-icons-react';
 import { DataGridFilterFn, DataGridFilterProps } from '../types';
 
 dayjs.extend(isSameOrBefore);
@@ -185,6 +185,7 @@ export const createDateFilter = ({
             value={filter.op || DateFilterOperator.Equals}
             onChange={(op: DateFilterOperator) => onFilterChange({ ...filter, op })}
             withinPortal
+            aria-label="Filter Operator select"
           />
         )}
 
@@ -201,6 +202,7 @@ export const createDateFilter = ({
               placeholder={placeholder}
               onFilterChange={onFilterChange}
               withTime={filter.withTime ?? false}
+              aria-label="Filter value"
             />
           </>
         ) : (
@@ -209,6 +211,7 @@ export const createDateFilter = ({
             placeholder={placeholder}
             onFilterChange={onFilterChange}
             withTime={filter.withTime ?? false}
+            aria-label="Filter value"
           />
         )}
       </>

diff --git a/src/filters/numberFilter.tsx b/src/filters/numberFilter.tsx
@@ -105,6 +105,7 @@ export const createNumberFilter = ({
             value={filter.op || NumberFilterOperator.Equals}
             onChange={handleFilterChange}
             withinPortal
+            aria-label="Filter Operator select"
           />
         )}
 
@@ -120,6 +121,7 @@ export const createNumberFilter = ({
             placeholder={placeholder}
             rightSection={isBetweenFilter(filter.op) ? null : <Filter size={20} />}
             hideControls
+            aria-label="Filter value"
           />
           {isBetweenFilter(filter.op) && (
             <NumberInput
@@ -132,6 +134,7 @@ export const createNumberFilter = ({
               }
               placeholder={placeholder}
               hideControls
+              aria-label="Filter value"
             />
           )}
         </Group>

diff --git a/src/filters/stringFilter.tsx b/src/filters/stringFilter.tsx
@@ -69,6 +69,7 @@ export const createStringFilter = ({
             value={filter.op || StringFilterOperator.Includes}
             onChange={(op) => onFilterChange({ ...filter, op: op as StringFilterOperator })}
             withinPortal
+            aria-label="Filter Operator select"
           />
         )}
 
@@ -77,6 +78,7 @@ export const createStringFilter = ({
           onChange={(e) => onFilterChange({ ...filter, value: e.target.value })}
           placeholder={placeholder}
           rightSection={<Filter size={20} />}
+          aria-label="Filter value"
         />
       </>
     );