diff --git a/apps/mantine-react-table-docs/components/mdx/SampleCodeSnippet.tsx b/apps/mantine-react-table-docs/components/mdx/SampleCodeSnippet.tsx index 8a5c41419..7fca70c37 100644 --- a/apps/mantine-react-table-docs/components/mdx/SampleCodeSnippet.tsx +++ b/apps/mantine-react-table-docs/components/mdx/SampleCodeSnippet.tsx @@ -2,9 +2,15 @@ import { CodeHighlight, type CodeHighlightProps, } from '@mantine/code-highlight'; -import { Paper } from '@mantine/core'; +import { Code, Paper, useMantineTheme } from '@mantine/core'; export function SampleCodeSnippet(props: CodeHighlightProps) { + const { primaryColor } = useMantineTheme(); + + if (!props.language && !props.className) { + return ; + } + return ( Installation - Mantine React Table Docs -> This is the install guide for `mantine-react-table` **V1** and `@mantine/` packages **V6**. MRT V1 will not work with Mantine V7. MRT V2 will be released by the end of 2023 and will work with Mantine V7. +> This is the install guide for `mantine-react-table` **V2** and `@mantine/` packages **V7**. MRT V2 will not work with Mantine V6. + +}> + Mantine React Table V2 is still a work in progress, but we are making good progress every day. + ## Installation @@ -17,11 +23,10 @@ import { FAQs } from '../../../components/mdx/FAQs'; > > Just double-check that you have the following in your package.json, or use the [full install commands](<#install-with-required-peer-dependencies-(recommended)>) below. > -> 1. `@mantine/core` (^v6.0) -> 2. `@mantine/hooks` (^v6.0) -> 3. `@mantine/dates` (^v6.0) +> 1. `@mantine/core` (^v7.1+) +> 2. `@mantine/hooks` (^v7.1+) +> 3. `@mantine/dates` (^v7.1+) > 4. `@tabler/icons-react` (2.23.0+) -> 5. `@emotion/react` (v11) > 6. `dayjs` (v1.11+) > 7. `react` and `react-dom` (v18) @@ -37,6 +42,16 @@ import { FAQs } from '../../../components/mdx/FAQs'; > > All internal dependencies: `@tanstack/react-table`, `@tanstack/react-virtual`, and `@tanstack/match-sorter-utils` +### Import CSS Styles + +After you install mantine-react-table, you will need to import the CSS styles from `mantine-react-table/styles.css` at the root of your project. (Where you import your other Mantine CSS styles.) + +```js +import '@mantine/core/styles.css'; //import Mantine V7 styles needed by MRT +import '@mantine/dates/styles.css'; +import 'mantine-react-table/styles.css'; //import MRT styles +``` + ### Common Errors If you don't see any styles applied to the mantine table components, you may have mismatching versions of `mantine-react-table` and `@mantine/core`. MRT v1 requires Mantine v6 and will not work with Mantine v7. MRT v2 will be released by the end of 2023 and will work with Mantine v7. diff --git a/packages/mantine-react-table/package.json b/packages/mantine-react-table/package.json index 453eeac1d..855118bc3 100644 --- a/packages/mantine-react-table/package.json +++ b/packages/mantine-react-table/package.json @@ -1,5 +1,5 @@ { - "version": "2.0.0-alpha.3", + "version": "2.0.0-alpha.4", "license": "MIT", "name": "mantine-react-table", "description": "A fully featured Mantine implementation of TanStack React Table V8, written from the ground up in TypeScript.",