Merge pull request #93 from Kuechlin/features-filter-and-selection

Features filter and selection
Kuechlin · Sep 6, 2022 · e7c2a48 · e7c2a48
2 parents 353a88a + bcf1d2a
commit e7c2a48
Show file tree

Hide file tree

Showing 13 changed files with 369 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -86,6 +86,7 @@ function Demo() {
   - [x] Fixed Header
   - [ ] Column pinning
 - [ ] Column Ordering
+- [x] Row Selection
 - [x] Pagination
 - [x] Styles Api
 - [x] Docs

diff --git a/docs/pages/Properties.tsx b/docs/pages/Properties.tsx
@@ -226,6 +226,17 @@ export default function Properties() {
               },
             ],
           },
+          {
+            group: 'Row Selection',
+            children: [
+              { name: 'withRowSelection', type: 'boolean', description: 'Enables row selection' },
+              {
+                name: 'onRowSelectionChange',
+                type: 'OnChangeCallback<RowSelectionState>',
+                description: 'Callback when row selection changed',
+              },
+            ],
+          },
         ]}
       />
     </Stack>

diff --git a/docs/pages/examples/ExternalFilterExample.tsx b/docs/pages/examples/ExternalFilterExample.tsx
@@ -0,0 +1,127 @@
+import { Stack, Card, Text, Group } from '@mantine/core';
+import {
+  booleanFilterFn,
+  DataGrid,
+  dateFilterFn,
+  highlightFilterValue,
+  numberFilterFn,
+  stringFilterFn,
+  ExternalColumnFilter,
+  useDataGrid,
+} from '../../../src';
+import CodeDemo from '../../components/CodeDemo';
+import { Data, demoData } from '../../demoData';
+
+export default function ExternalFilterExample() {
+  const [table, setRef] = useDataGrid<Data>();
+
+  return (
+    <CodeDemo code={grid_usage}>
+      {table && (
+        <Group>
+          <Card>
+            <Stack>
+              <Text>Text Filter:</Text>
+              <ExternalColumnFilter column={table.getColumn('text')} />
+            </Stack>
+          </Card>
+        </Group>
+      )}
+      <DataGrid
+        data={demoData.splice(0, 25)}
+        tableRef={setRef}
+        columns={[
+          {
+            accessorKey: 'text',
+            header: 'Text that is too long for a Header',
+            filterFn: stringFilterFn,
+            size: 300,
+            cell: highlightFilterValue,
+          },
+          {
+            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,
+          },
+        ]}
+      />
+    </CodeDemo>
+  );
+}
+const grid_usage = `
+import {
+    DataGrid,
+    booleanFilterFn,
+    dateFilterFn,
+    highlightFilterValue,
+    numberFilterFn,
+    stringFilterFn,
+} from 'mantine-data-grid';
+
+function Demo() {
+    return (
+        <DataGrid
+            data={data}
+            striped
+            highlightOnHover
+            withGlobalFilter
+            withPagination
+            withColumnFilters
+            withSorting
+            columns={[
+                {
+                    accessorKey: 'text',
+                    header: 'Text that is too long for a Header',
+                    filterFn: stringFilterFn,
+                    size: 300,
+                    cell: highlightFilterValue,
+                },
+                {
+                    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,
+                },
+            ]}
+        />
+    );
+}
+`;
diff --git a/docs/pages/examples/RowSelectionExample.tsx b/docs/pages/examples/RowSelectionExample.tsx
@@ -0,0 +1,132 @@
+import { RowSelectionState } from '@tanstack/react-table';
+import { useState } from 'react';
+import {
+  booleanFilterFn,
+  DataGrid,
+  dateFilterFn,
+  highlightFilterValue,
+  numberFilterFn,
+  stringFilterFn,
+} from '../../../src';
+import CodeDemo from '../../components/CodeDemo';
+import { demoData } from '../../demoData';
+
+export default function RowSelectionExample() {
+  const [selected, setSelected] = useState<RowSelectionState>({});
+  return (
+    <CodeDemo code={grid_usage}>
+      <DataGrid
+        data={demoData}
+        striped
+        highlightOnHover
+        withGlobalFilter
+        withPagination
+        withColumnFilters
+        withSorting
+        withColumnResizing
+        withRowSelection
+        state={{
+          rowSelection: selected,
+        }}
+        onRowSelectionChange={setSelected}
+        columns={[
+          {
+            accessorKey: 'text',
+            header: 'Text that is too long for a Header',
+            filterFn: stringFilterFn,
+            size: 300,
+            cell: highlightFilterValue,
+          },
+          {
+            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,
+          },
+        ]}
+      />
+    </CodeDemo>
+  );
+}
+const grid_usage = `
+import {
+    DataGrid,
+    booleanFilterFn,
+    dateFilterFn,
+    highlightFilterValue,
+    numberFilterFn,
+    stringFilterFn,
+} from 'mantine-data-grid';
+
+function Demo() {
+  const [selected, setSelected] = useState<RowSelectionState>({});
+  return (
+    <DataGrid
+      data={demoData}
+      striped
+      highlightOnHover
+      withGlobalFilter
+      withPagination
+      withColumnFilters
+      withSorting
+      withColumnResizing
+      withRowSelection
+      state={{
+        rowSelection: selected,
+      }}
+      onRowSelectionChange={setSelected}
+      columns={[
+        {
+          accessorKey: 'text',
+          header: 'Text that is too long for a Header',
+          filterFn: stringFilterFn,
+          size: 300,
+          cell: highlightFilterValue,
+        },
+        {
+          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,
+        },
+      ]}
+    />
+  );
+}
+`;
diff --git a/docs/pages/examples/index.ts b/docs/pages/examples/index.ts
@@ -6,8 +6,11 @@ import EmptyExample from './EmptyExample';
 import InitialStateExample from './InitialStateExample';
 import LocaleExample from './LocaleExample';
 import OnRowClickExample from './OnRowExample';
+import OverrideExample from './ExternalFilterExample';
+import RowSelectionExample from './RowSelectionExample';
 import StateExample from './StateExample';
 import StylesExample from './StylesExample';
+import ExternalFilterExample from './ExternalFilterExample';
 
 export type Example = {
   label: string;
@@ -67,4 +70,14 @@ export const examples = {
     path: '/example/locale',
     element: LocaleExample,
   }),
+  rowSelection: ex({
+    label: 'Row selection',
+    path: '/example/rowselection',
+    element: RowSelectionExample,
+  }),
+  override: ex({
+    label: 'External filter',
+    path: '/example/externalfilter',
+    element: ExternalFilterExample,
+  }),
 };
diff --git a/src/ColumnFilter.tsx b/src/ColumnFilter.tsx
@@ -1,6 +1,6 @@
 import { ActionIcon, Button, Group, Menu, Stack } from '@mantine/core';
 import { Column } from '@tanstack/react-table';
-import { useState } from 'react';
+import { createElement, useState } from 'react';
 import { Check, Filter, X } from 'tabler-icons-react';
 import { isDataGridFilter } from './types';
 
@@ -76,3 +76,23 @@ export const ColumnFilter = ({ column, className, color }: ColumnFilterProps) =>
     </Menu>
   );
 };
+
+export interface ExternalColumnFilterProps {
+  column: Column<any, any>;
+}
+
+export const ExternalColumnFilter = ({ column }: ExternalColumnFilterProps) => {
+  const filterFn = column.columnDef.filterFn;
+  const [value, setValue] = useState(
+    column.getFilterValue() || (isDataGridFilter(filterFn) ? filterFn.init() : { value: null })
+  );
+
+  if (!isDataGridFilter(filterFn)) return null;
+
+  const handleChange = (value: any) => {
+    column.setFilterValue(value);
+    setValue(value);
+  };
+
+  return createElement(filterFn.element, { filter: value, onFilterChange: handleChange });
+};