Skip to content

Commit

Permalink
Merge pull request #171 from Kuechlin/v0.2.2
Browse files Browse the repository at this point in the history
V0.2.2
  • Loading branch information
Kuechlin authored May 25, 2023
2 parents c9cad10 + c6563c0 commit 33ba3c0
Show file tree
Hide file tree
Showing 22 changed files with 375 additions and 209 deletions.
6 changes: 3 additions & 3 deletions docs/components/CodeDemo.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import { Tabs } from '@mantine/core';
import { Prism } from '@mantine/prism';
import { IconCode, IconComponents } from '@tabler/icons-react';
import { ReactNode } from 'react';
import { Code, Components } from 'tabler-icons-react';

export default function CodeDemo({ code, children }: { code: string; children: ReactNode }) {
return (
<Tabs variant="pills" defaultValue="comp">
<Tabs.List position="right">
<Tabs.Tab value="comp" icon={<Components />} children="Component" />
<Tabs.Tab value="code" children="Code" icon={<Code />} />
<Tabs.Tab value="comp" icon={<IconComponents />} children="Component" />
<Tabs.Tab value="code" children="Code" icon={<IconCode />} />
</Tabs.List>
<Tabs.Panel value="comp" pt="sm">
{children}
Expand Down
10 changes: 5 additions & 5 deletions docs/components/Header.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Title, Group, Header as HeaderMantine, Avatar, useMantineColorScheme, ActionIcon } from '@mantine/core';
import { ActionIcon, Avatar, Group, Header as HeaderMantine, Title, useMantineColorScheme } from '@mantine/core';

import { BrandGithub, MoonStars, Sun, Table } from 'tabler-icons-react';
import { IconBrandGithub, IconMoonStars, IconSun, IconTable } from '@tabler/icons-react';

export default function Header() {
const { colorScheme, toggleColorScheme } = useMantineColorScheme();
Expand All @@ -9,7 +9,7 @@ export default function Header() {
<HeaderMantine height={68}>
<Group position="apart" align="center" p="xs">
<Group align="center">
<Avatar children={<Table size={32} />} color="blue" radius="xl" size={48} />
<Avatar children={<IconTable size={32} />} color="blue" radius="xl" size={48} />
<Title>Mantine Data Grid</Title>
</Group>
<Group align="center">
Expand All @@ -25,11 +25,11 @@ export default function Header() {
target="_blank"
rel="noopener noreferrer"
>
<BrandGithub size={16} />
<IconBrandGithub size={16} />
</ActionIcon>

<ActionIcon variant="default" onClick={() => toggleColorScheme()} size="lg">
{colorScheme === 'dark' ? <Sun size={16} /> : <MoonStars size={16} />}
{colorScheme === 'dark' ? <IconSun size={16} /> : <IconMoonStars size={16} />}
</ActionIcon>
</Group>
</Group>
Expand Down
6 changes: 3 additions & 3 deletions docs/pages/examples/AsyncExample.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import { Badge } from '@mantine/core';
import { useEffect, useState } from 'react';
import { Badge } from 'tabler-icons-react';
import {
booleanFilterFn,
DataGrid,
DataGridPaginationState,
OnChangeCallback,
booleanFilterFn,
dateFilterFn,
highlightFilterValue,
numberFilterFn,
OnChangeCallback,
stringFilterFn,
} from '../../../src';
import { Data, demoData } from '../../demoData';
Expand Down
6 changes: 3 additions & 3 deletions docs/pages/examples/ColumnDragDropExample.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import {
import { restrictToHorizontalAxis } from '@dnd-kit/modifiers';
import { arrayMove, horizontalListSortingStrategy, SortableContext, useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { GridDots } from 'tabler-icons-react';
import { IconGridDots } from '@tabler/icons-react';
import { DataGrid, DataGridHeaderCellProps } from '../../../src';
import { Data, demoData } from '../../demoData';

Expand Down Expand Up @@ -63,7 +63,7 @@ export default function ColumnDragDropExample() {
<Group position="apart">
{activeId}
<ActionIcon ml="auto">
<GridDots />
<IconGridDots />
</ActionIcon>
</Group>
</Card>
Expand Down Expand Up @@ -110,7 +110,7 @@ const DraggableColumnHeader = ({ children, header, ...props }: DataGridHeaderCel
<Box sx={{ display: 'flex' }}>
{children}
<ActionIcon ml="auto">
<GridDots {...attributes} {...listeners} />
<IconGridDots {...attributes} {...listeners} />
</ActionIcon>
</Box>
</th>
Expand Down
57 changes: 57 additions & 0 deletions docs/pages/examples/NestedExample.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import { Badge, Group } from '@mantine/core';
import { DataGrid, stringFilterFn } from '../../../src';

const data = [
{
name: 'First',
items: [
{ name: '2001', role: 'test' },
{ name: '2002', role: 'testing' },
],
},
{
name: 'Second',
items: [
{ name: '2001', role: 'test' },
{ name: '2003', role: 'other' },
],
},
];

export default function NestedExample() {
return (
<DataGrid<(typeof data)[0]>
data={data}
striped
highlightOnHover
withGlobalFilter
withPagination
withColumnFilters
withSorting
withColumnResizing
columns={[
{
accessorKey: 'name',
header: 'name',
filterFn: stringFilterFn,
size: 100,
},
{
header: 'Years',
accessorFn: (v) => JSON.stringify(v.items),
cell: ({ row }) => (
<Group>
{row.original.items.map((role, i) => {
return (
<Badge key={i} size="sm" radius="sm">
{role.name}
</Badge>
);
})}
</Group>
),
},
]}
/>
);
}
4 changes: 2 additions & 2 deletions docs/pages/examples/OnRowExample.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,8 @@ export default function OnRowClickExample() {
return (
<>
<Group>
<Notification disallowClose title="click on row to highlight" />
<Notification disallowClose title="hover over column fish to highlight cell" />
<Notification withCloseButton={false} title="click on row to highlight" />
<Notification withCloseButton={false} title="hover over column fish to highlight cell" />
</Group>
<DataGrid
data={demoData.slice(0, 10)}
Expand Down
71 changes: 71 additions & 0 deletions docs/pages/examples/ResetFilterExample.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
import { Button, Stack } from '@mantine/core';
import { useState } from 'react';
import {
DataGrid,
DataGridFiltersState,
booleanFilterFn,
dateFilterFn,
highlightFilterValue,
numberFilterFn,
stringFilterFn,
} from '../../../src';
import { demoData } from '../../demoData';

export default function ResetDefaultExample() {
const [filter, setFilter] = useState<DataGridFiltersState>([]);

return (
<Stack>
<Button disabled={filter.length === 0} onClick={() => setFilter([])}>
Reset Filters
</Button>
<DataGrid
data={demoData}
striped
highlightOnHover
withGlobalFilter
withPagination
withColumnFilters
withSorting
withColumnResizing
state={{
columnFilters: filter,
}}
onFilter={setFilter}
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,
},
]}
/>
</Stack>
);
}
20 changes: 20 additions & 0 deletions docs/pages/examples/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,14 @@ import RowExpandingExample from './RowExpandingExample';
// @ts-ignore
import RowExpandingExampleCode from './RowExpandingExample.tsx?raw';

import NestedExample from './NestedExample';
// @ts-ignore
import NestedExampleCode from './NestedExample.tsx?raw';

import ResetFilterExample from './ResetFilterExample';
// @ts-ignore
import ResetFilterExampleCode from './ResetFilterExample.tsx?raw';

export type Example = {
label: string;
path: string;
Expand Down Expand Up @@ -182,4 +190,16 @@ export const examples = {
element: RowExpandingExample,
code: RowExpandingExampleCode,
}),
nested: ex({
label: 'Nested Data example',
path: '/example/nested',
element: NestedExample,
code: NestedExampleCode,
}),
reset: ex({
label: 'Reset Filter',
path: '/example/reset',
element: ResetFilterExample,
code: ResetFilterExampleCode,
}),
};
12 changes: 6 additions & 6 deletions docs/pages/index.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { IconBook, IconFilter, IconPaint, IconRocket, IconStar } from '@tabler/icons-react';
import { ComponentType } from 'react';
import { Book, Filter, Paint, Rocket, Star } from 'tabler-icons-react';
import Demo from './Demo';
import Filters from './Filters';
import GettingStarted from './GettingStarted';
Expand All @@ -19,35 +19,35 @@ export type Page = {
export const pages: Page[] = [
{
color: 'orange',
icon: Star,
icon: IconStar,
label: 'Demo',
path: '/',
element: Demo,
},
{
color: 'teal',
icon: Rocket,
icon: IconRocket,
label: 'Getting started',
path: '/getting-started',
element: GettingStarted,
},
{
color: 'red',
icon: Book,
icon: IconBook,
label: 'Properties',
path: '/properties',
element: Properties,
},
{
color: 'indigo',
icon: Paint,
icon: IconPaint,
label: 'Styles',
path: '/styles',
element: Styles,
},
{
color: 'yellow',
icon: Filter,
icon: IconFilter,
label: 'Filters',
path: '/filters',
element: Filters,
Expand Down
3 changes: 1 addition & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

14 changes: 9 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "mantine-data-grid",
"version": "0.2.1",
"version": "0.2.2",
"homepage": "https://kuechlin.github.io/mantine-data-grid/",
"repository": {
"type": "git",
Expand Down Expand Up @@ -31,16 +31,16 @@
"prepare": "husky install"
},
"dependencies": {
"@emotion/react": "^11.10.6",
"@emotion/react": "^11.11.0",
"@mantine/core": "^6.0.6",
"@mantine/dates": "^6.0.6",
"@mantine/hooks": "^6.0.6",
"@tanstack/react-table": "8.8.5",
"@tabler/icons-react": "^2.20.0",
"@tanstack/react-table": "8.9.1",
"@tanstack/react-virtual": "3.0.0-beta.26",
"dayjs": "^1.11.7",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"tabler-icons-react": "^1.56.0"
"react-dom": "^18.0.0"
},
"devDependencies": {
"@commitlint/cli": "17.5.1",
Expand Down Expand Up @@ -73,6 +73,10 @@
"vite": "4.2.1"
},
"peerDependencies": {
"@emotion/react": "^11.10.6",
"@mantine/core": "^6.0.6",
"@mantine/dates": "^6.0.6",
"@mantine/hooks": "^6.0.6",
"dayjs": "^1.11.7",
"react": "^18.0.0",
"react-dom": "^18.0.0"
Expand Down
Loading

0 comments on commit 33ba3c0

Please sign in to comment.