components/MRTable/table.tsx

import React from 'react';
import {
  MantineReactTable,
  useMantineReactTable,
  type MRT_ColumnDef
} from 'mantine-react-table';
import { faker } from '@faker-js/faker';

const columns: MRT_ColumnDef<(typeof data)[0]>[] = [
  {
    accessorKey: 'firstName',
    header: 'First Name',
  },
  {
    accessorKey: 'lastName',
    header: 'Last Name',
  },
  {
    accessorKey: 'address',
    header: 'Address',
  },
  {
    accessorKey: 'state',
    header: 'State',
  },
  {
    accessorKey: 'phoneNumber',
    header: 'Phone Number',
  },
];

const data = [...Array(20)].map(() => ({
  address: faker.location.streetAddress(),
  firstName: faker.person.firstName(),
  lastName: faker.person.lastName(),
  phoneNumber: faker.phone.number(),
  state: faker.location.state(),
}));

type MantineTableProps = {
  enableRowSelection?: boolean;
  enableColumnResizing?: boolean;
  enableColumnOrdering?: boolean
};

const MantineTable: React.FC<MantineTableProps> = ({
  enableRowSelection = false,
  enableColumnResizing = false,
  enableColumnOrdering = false
}) => {
  const table = useMantineReactTable({
    data,
    columns,
    enableRowSelection,
    enableColumnResizing,
    enableColumnOrdering,
    // initialState: {
    //   showColumnFilters: true,
    //   showGlobalFilter: true,
    //   columnPinning: {
    //     left: ['mrt-row-select'],
    //     right: ['mrt-row-expand', 'mrt-row-actions'],
    //   },
    // },
    // paginationDisplayMode: 'pages',
    // positionToolbarAlertBanner: 'bottom',
    // mantinePaginationProps: {
    //   radius: 'sm',
    //   size: 'sm',
    // },
    // mantineSearchTextInputProps: {
    //   placeholder: 'Search Employees',
    // },
  });

  return (
    <MantineReactTable
      table={table}
    />
  );
};

export default MantineTable;


components/MRTable/table.stories.tsx

import type { StoryObj } from '@storybook/react';
import MantineTable from './table';

// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
const meta = {
  title: 'Mantine/Tables/Table',
  component: MantineTable,
  parameters: {
    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {
    enableRowSelection: {
      control: 'boolean',
      description: 'Enable or disable row selection',
      defaultValue: false,
    },
    enableColumnResizing: {
      control: 'boolean',
      description: 'Enable or disable column resizing',
      defaultValue: false,
    },
    enableColumnOrdering: {
      control: 'boolean',
      description: 'Enable or disable column ordering',
      defaultValue: false,
    },
  }
};

export default meta;
type Story = StoryObj<typeof MantineTable>;

// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
export const DefaultTable: Story = {
  args: {
    // Add any necessary args for your component here
  },
};

export const SelectionTable: Story = {
  args: {
    enableRowSelection: true,
  },
};

export const GridWithResizingTable: Story = {
  args: {
    enableColumnOrdering: true,
  },
};

нужно добавить data из компонента Topology Page
import { Metadata } from 'next';
import { faker } from '@faker-js/faker';
import { MRT_ColumnDef } from 'mantine-react-table';
import { imb_plex_sans } from '@/app/ui/fonts';
import Button from '@/components/Buttons/Buttons';
import { IconDownload } from '@tabler/icons-react';
import { DefaultTable } from '@/components/MRTable/table.stories';

export const metadata: Metadata = {
  title: 'Topology Page'
};

const columns: MRT_ColumnDef<(typeof data)[0]>[] = [
  {
    accessorKey: 'firstName',
    header: 'First Name',
  },
  {
    accessorKey: 'lastName',
    header: 'Last Name',
  },
  {
    accessorKey: 'address',
    header: 'Address',
  },
  {
    accessorKey: 'status',
    header: 'Status',
  },
  {
    accessorKey: 'number',
    header: 'Number',
  },
];

const data = [...Array(10)].map(() => ({
  address: faker.location.streetAddress(),
  firstName: faker.person.firstName(),
  lastName: faker.person.lastName(),
  number: faker.phone.number(),
  status: faker.location.state(),
}));

export default function Page() {
  return (
    <div className="w-full">
      <div className="flex w-full items-center gap-4 p-2">
        <h2 className={`${imb_plex_sans.className} text-2xl`}>Topology Page</h2>
        <Button
          variant='outline'
          radius='xl'
        >
          <IconDownload className="h-4" />
          <span className="hidden md:block">Экспорт в csv</span>
        </Button>
      </div>
      <div className="p-2">
        <DefaultTable />
      </div>
    </div>
  )
}