8 | 
9 |
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/app/examples/basic-usage/BasicUsageExample.tsx:
--------------------------------------------------------------------------------
1 | import { DataTable } from '__PACKAGE__';
2 | import companies from '~/data/companies.json';
3 |
4 | export function BasicUsageExample() {
5 | return (
6 | -
13 | {children}
14 |
17 |
19 | )}
20 |
20 |
21 | {title}
22 |
23 |
24 | {children}
25 |
26 |
27 | {content()}
23 | Postal address:
23 |
24 | {record.streetAddress}, {record.city}, {record.state}
25 |
26 | Mission statement:
29 |
10 | }
14 | component="a"
15 | aria-label={`View ${PRODUCT_NAME} source code on GitHub`}
16 | href={REPO_LINK}
17 | target="_blank"
18 | >
19 | Source
20 |
21 | code
22 |
23 |
24 |
38 | );
39 | }
40 |
--------------------------------------------------------------------------------
/app/examples/non-standard-record-ids/NonStandardRecordIdsStringExample.tsx:
--------------------------------------------------------------------------------
1 | import { DataTable } from '__PACKAGE__';
2 |
3 | export function NonStandardRecordIdsStringExample() {
4 | return (
5 | Postal address:
25 |
26 | {record.streetAddress}, {record.city}, {record.state}
27 |
28 | Mission statement:
31 | Postal address:
25 |
26 | {record.streetAddress}, {record.city}, {record.state}
27 |
28 | Mission statement:
31 | Postal address:
26 |
27 | {record.streetAddress}, {record.city}, {record.state}
28 |
29 | Mission statement:
32 | onScrollToTop, onScrollToBottom, onScrollToRight{' '}
25 | and onScrollToLeft callbacks when user scrolls to the top, bottom, left or right edge of the table.
26 | You can use the onScrollToBottom event to implement infinite scrolling, like so:
27 |
31 | {children}
32 |
34 | Postal address:
26 |
27 | {record.streetAddress}, {record.city}, {record.state}
28 |
29 | Mission statement:
32 | defaultColumnRender prop to the table, it will be used to render all columns that
23 | do not provide a custom render function.
24 | 25 | The
defaultColumnRender function receives the current row, its index and accessor name and should
26 | return a ReactNode:
27 | Postal address:
31 |
32 | {record.streetAddress}, {record.city}, {record.state}
33 |
34 | Mission statement:
37 |
30 |
37 | {label}
38 |
39 | {documentAs &&
52 | );
53 | }
54 |
--------------------------------------------------------------------------------
/components/NavbarButton.module.css:
--------------------------------------------------------------------------------
1 | .link,
2 | .root {
3 | text-decoration: none;
4 | }
5 |
6 | .root {
7 | display: flex;
8 | align-items: center;
9 | gap: var(--mantine-spacing-xs);
10 | padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
11 | cursor: pointer;
12 | user-select: none;
13 | color: var(--mantine-color-text);
14 | background: light-dark(var(--navbar-button-bg-color-light), var(--navbar-button-bg-color-dark));
15 | transition: background 0.2s;
16 | &:hover {
17 | background: light-dark(var(--navbar-button-hover-bg-color-light), var(--navbar-button-hover-bg-color-dark));
18 | }
19 | &:active {
20 | .icon:not(.expanded),
21 | .dot {
22 | transform: scale(0.9);
23 | }
24 | .text {
25 | transform: translateY(1px);
26 | }
27 | }
28 | }
29 |
30 | .iconWrapper {
31 | flex: 0 0 auto;
32 | width: rem(28px);
33 | height: rem(28px);
34 | border-radius: 50%;
35 | }
36 |
37 | .icon,
38 | .dot {
39 | transition: all 0.15s;
40 | }
41 |
42 | .expanded {
43 | transform: rotateZ(90deg);
44 | }
45 |
46 | .dotWrapper {
47 | padding: rem(2px);
48 | background: light-dark(white, var(--mantine-color-body));
49 | border-radius: 50%;
50 | border: 1px solid;
51 | margin-left: rem(7px);
52 | margin-right: rem(6px);
53 | }
54 |
55 | .dot {
56 | width: rem(8px);
57 | height: rem(8px);
58 | border-radius: 50%;
59 | }
60 |
61 | /* todo remove this firefox fix if the problem is solved in Mantine */
62 | @-moz-document url-prefix() {
63 | .text {
64 | margin-top: 0.125em;
65 | margin-bottom: -0.125em;
66 | }
67 | }
68 |
--------------------------------------------------------------------------------
/app/type-definitions/page.tsx:
--------------------------------------------------------------------------------
1 | import type { Route } from 'next';
2 | import { readdir } from 'node:fs/promises';
3 | import { PRODUCT_NAME } from '~/app/config';
4 | import { CodeBlock } from '~/components/CodeBlock';
5 | import { PageNavigation } from '~/components/PageNavigation';
6 | import { PageTitle } from '~/components/PageTitle';
7 | import { Txt } from '~/components/Txt';
8 | import { readCodeFile } from '~/lib/code';
9 | import { allPromiseProps, getRouteMetadata } from '~/lib/utils';
10 |
11 | const PATH: Route = '/type-definitions';
12 | export const metadata = getRouteMetadata(PATH);
13 |
14 | const TYPE_FILES_PATH = 'package/types';
15 |
16 | export default async function TypeDefinitionsPage() {
17 | const filesNames = await readdir(TYPE_FILES_PATH);
18 |
19 | const files = await Promise.all(
20 | filesNames
21 | .filter((name) => name !== 'index.ts')
22 | .map((name) => allPromiseProps({ [name]: readCodeFile(`/../${TYPE_FILES_PATH}/${name}`) }))
23 | );
24 | return (
25 | <>
26 | {documentAs}}
40 |
41 | onCheckedChange(e.target.checked)} />
42 |
51 | DataTable component exposes a bodyRef property that can be used to pass a ref to
24 | the underlying table tbody element. This ref can be passed to the useAutoAnimate(){' '}
25 | hook from the excellent records and{' '}
27 | columns properties to be set:
28 | 35 | Head over to the next example to learn about its basic properties. 36 |
30 | Hence, you won’t be able to use {PRODUCT_NAME} V7+ with Mantine V6. 31 |
31 | This version works with Mantine V8.x 32 |
33 | (and probably V7.x). 34 |
35 |
36 | If you’re still using
defaultColumnProps (which accepts a subset of{' '}
25 |
16 |
23 |
24 |
34 |
35 |
42 |
43 |
51 |
52 |
53 | );
54 | }
55 |
--------------------------------------------------------------------------------
/package/DataTableRowSelectorCell.css:
--------------------------------------------------------------------------------
1 | .mantine-datatable-row-selector-cell {
2 | position: sticky;
3 | z-index: 1;
4 | width: 44px;
5 | min-width: 44px;
6 | max-width: 44px;
7 | left: 0;
8 | text-align: center;
9 | padding: var(--mantine-spacing-xs);
10 |
11 | @mixin rtl {
12 | left: auto;
13 | right: 0;
14 | }
15 |
16 | tr[data-selected] & {
17 | background: inherit;
18 | &::before {
19 | content: '';
20 | position: absolute;
21 | top: 0;
22 | right: 0;
23 | bottom: 0;
24 | left: 0;
25 | background: var(--mantine-datatable-selection-color);
26 | }
27 | }
28 | &::after {
29 | content: '';
30 | position: absolute;
31 | top: 0;
32 | right: calc(-1 * var(--mantine-spacing-xs));
33 | bottom: 0;
34 | border-left: 1px solid var(--mantine-datatable-row-border-color);
35 | width: var(--mantine-spacing-xs);
36 | background: var(--mantine-datatable-shadow-background-left);
37 | pointer-events: none;
38 | opacity: 0;
39 | transition: opacity 0.2s;
40 |
41 | @mixin rtl {
42 | right: auto;
43 | left: calc(-1 * var(--mantine-spacing-xs));
44 | border-left: 0;
45 | border-right: 1px solid var(--mantine-datatable-row-border-color);
46 | background: var(--mantine-datatable-shadow-background-right);
47 | }
48 | }
49 |
50 | tr[data-with-row-border] &::after {
51 | top: rem(-1px);
52 | bottom: rem(-1px);
53 | }
54 |
55 | tr:last-of-type &::after {
56 | bottom: 0;
57 | }
58 |
59 | &[data-shadow-visible]::after {
60 | opacity: var(--mantine-datatable-left-shadow-opacity);
61 |
62 | @mixin rtl {
63 | opacity: var(--mantine-datatable-right-shadow-opacity);
64 | }
65 | }
66 | }
67 |
68 | .mantine-datatable-row-selector-cell-checkbox {
69 | cursor: pointer;
70 | }
71 |
--------------------------------------------------------------------------------
/package/DataTableHeaderSelectorCell.tsx:
--------------------------------------------------------------------------------
1 | import type { MantineStyleProp } from '@mantine/core';
2 | import { Checkbox, TableTh, type CheckboxProps } from '@mantine/core';
3 | import clsx from 'clsx';
4 | import type { DataTableSelectionTrigger } from './types';
5 | import { POINTER_CURSOR } from './utilityClasses';
6 |
7 | type DataTableHeaderSelectorCellProps = {
8 | className: string | undefined;
9 | style: MantineStyleProp | undefined;
10 | trigger: DataTableSelectionTrigger;
11 | shadowVisible: boolean;
12 | checked: boolean;
13 | indeterminate: boolean;
14 | checkboxProps: CheckboxProps;
15 | onChange: (() => void) | undefined;
16 | rowSpan: number | undefined;
17 | ref: React.Ref
26 |
27 | Go back
28 |
29 |
30 | {backTitle}
31 |
32 |
33 |
44 | Up next
45 |
46 | {nextTitle}
47 |
48 |
49 | v7.11.3, {PRODUCT_NAME} also supports row dragging (implemented with{' '}
29 | 32 | Here is how you would implement it in your project: 33 |
textSelectionDisabled
23 | 26 | For instance, for usability reasons, it would make sense to disable text selection if you: 27 |
24 | {event.shiftKey && ( 25 | <> 26 | You pressed the
Shift key when clicking.
27 | 28 | 29 | )} 30 | {event.ctrlKey && ( 31 | <> 32 | You pressed the
Ctrl key when clicking.
33 | 34 | 35 | )} 36 | {event.altKey && ( 37 | <> 38 | You pressed the
Alt key when clicking.
39 | 40 | 41 | )} 42 | {event.metaKey && ( 43 | <> 44 | You pressed the
Meta key when clicking.
45 | 46 | 47 | )} 48 |