曼汀数据表

配置驱动的包装器周围 曼通数据表。 。 。 . 将表格描述为一个字段列表,并进行排序、标记、过滤、CRUD模式, 扩展行和响应性移动卡布局——由 TanStack 查询。 。 。 .

安装

npm i @espresso-lab/mantine-data-table

您需要安装的对等依赖 : @mantine/core, (中文(简体) ), @mantine/dates, (中文(简体) ), @mantine/form, (中文(简体) ), @mantine/hooks, (中文(简体) ), @tabler/icons-react, (中文(简体) ), react 财务报告和审定财务报表 react-dom。 。 。 . (单位:千美元)mantine-datatable 财务报告和审定财务报表 @tanstack/react-query 来捆绑. )

设置

将您的应用程序包入 DataTableProvider它提供了基础 URL、 TanStack 查询客户端和 每一个请求都发出信头.

import "@mantine/core/styles.css";
import "@mantine/dates/styles.css";
import "mantine-datatable/styles.css";

import { MantineProvider } from "@mantine/core";
import { QueryClient } from "@tanstack/react-query";
import { DataTableProvider } from "@espresso-lab/mantine-data-table";

const queryClient = new QueryClient();

export function Root() {
  return (
    <MantineProvider>
      <DataTableProvider
        baseUrl="https://api.example.com"
        queryClient={queryClient}
        getHeaders={async () => ({ Authorization: `Bearer ${await getToken()}` })}
      >
        <App />
      </DataTableProvider>
    </MantineProvider>
  );
}

使用量

表格由 queryKey,一个 apiPath 和清单 fields组件获取 GET {apiPath},使行和线条针对同一路径创建/更新/删除.

import { DataTable, Field } from "@espresso-lab/mantine-data-table";

interface User {
  id: string;
  name: string;
  email: string;
  active: boolean;
}

const fields: Field<User>[] = [
  {
    id: "name",
    list: true, create: true, update: true, delete: true,
    required: true,
    column: { accessor: "name", title: "Name", sortable: true },
  },
  {
    id: "email",
    list: true, create: true, update: true, delete: true,
    column: { accessor: "email", title: "Email" },
  },
  {
    id: "active",
    list: true, create: true, update: true, delete: true,
    type: "boolean",
    column: { accessor: "active", title: "Active" },
  },
];

export function Users() {
  return (
    <DataTable<User>
      title="Benutzer"
      titleOrder={2}
      description="12 Benutzer · 2 eingeladen"
      entityName="Benutzer"
      recordLabel={(user) => user.name}
      search={{ placeholder: "Name oder E-Mail suchen" }}
      queryKey={["users"]}
      apiPath="/users"
      fields={fields}
      selection
      pagination
      mobileCards
    />
  );
}

该表使整个列表脚手架:标题(标题、描述、刷新、 buttons, (中文(简体) ), 批量菜单,一旦选中行, 创建按钮“ Benutzer analegen” , 最后, 您的QQ moreActions),带有搜索字段和您的工具栏 toolbar 控制,还有表格。 每行的结尾都是 行动——进一步 rowActions,则 比尔比顿,则 洛兴 (红色,总是最后);在电话上他们 移动到卡的QQ菜单。 其行完全没有动作的表格不会得到动作栏. 这个 动作列在宽的表格中保持右侧边缘 卷起侧行,而一行扩大后,与桌子的可见部分一样宽并保持原地. 列脚(和)作为电话上的最后一张卡片出现. 失败的请求显示“ Erneut ” 而不是表格的提醒 。 删除总是先问 并命名记录.

字段

一个字段既描述表格列又描述窗体输入.

常见道具

构件

表格所制作的棋子被导出,所以没有表格的一页看起来是一样的:

import { PageHeader, RowActions, SearchInput, ViewSwitch } from "@espresso-lab/mantine-data-table";

<PageHeader
  title="Eigentümerversammlungen"
  description="4 Versammlungen · 1 läuft gerade"
  breadcrumbs={[{ label: "WEG Musterstraße 1", onClick: openObject }]}
  badge={<Badge color="teal">Läuft</Badge>}
  actions={<Button leftSection={<IconPlus size={16} />}>Versammlung anlegen</Button>}
/>;

<SearchInput value={query} onChange={setQuery} placeholder="Einheit oder Eigentümer suchen" />;

<RowActions
  name={unit.name}
  actions={[{ label: "Herunterladen", icon: <IconDownload size={16} />, onClick: download }]}
  onEdit={() => edit(unit)}
  onDelete={() => confirmDelete(unit)}
/>;

• PageHeader 面包屑小径,标题(order默认值 2、徽章和信息 hint 之后,阴暗的 description 如下, actions 在右边,包装在标题下的电话.
• SearchInput ——搜索图标,在有文字时设置一个清晰的按钮,在电话上全宽.
• ViewSwitch - 调换一个领域的视图(value, (中文(简体) ), onChange, (中文(简体) ), data 联 合 国 { value, label }, (中文(简体) ), label 作为无障碍名称:a SegmentedControl 从 sm 断点, 全宽 Select 下方有相同的条目,其中三个德国标签不再相并用.
• RowActions ——行有工具提示的动作图标:进一步动作(在qq菜单中有两个以上), 比尔比顿, (中文(简体) ), 洛兴。它阻止点击到达可点击行.

面包屑

每页页页头( E)PageHeader,或一个 DataTable 与 titleOrder={2}显示面包屑 线索以自己的标题结尾。 应用程序提供根一次 BreadcrumbProvider; 提供者 巢穴,所以一个区块可以为它下方的一切添加自己的水平:

import { BreadcrumbProvider } from "@espresso-lab/mantine-data-table";

<BreadcrumbProvider trail={[{ label: "Übersicht", onClick: () => navigate({ to: "/" }) }]}>
  <Outlet />
</BreadcrumbProvider>;

一页只传出 根与自己之间的祖先 breadcrumbs下方 sm 分出一行超过两道碎屑的线索 : 较早的关卡会移动到 qq 菜单中 长标签被截断.

倾斜

DataTable 财务报告和审定财务报表 SubTable 页同,并显示同页页脚—— " 1 - 15 von 120 " ,页和页 “Einträge pro Seite”作为桌面上桌下一行,在电话卡片下以一行为中心。 页面 大小。 一种大小的,或者没有,隐藏着选择.

在浏览器. 该表有所有记录,并显示其中一页:

<DataTable pagination … />
<DataTable pagination={{ pageSizes: [25, 50, 100], pageSize: 25 }} … />
<SubTable pagination records={entries} … />

从服务器. DataTable 询问 apiPath 一次一页 - page (从1起), size, (中文(简体) ), sort 财务报告和审定财务报表 direction 和 search 并读取 { items, total }。然后对服务器进行排序和搜索; filters 不在浏览器中应用,通过什么 服务器过滤器 queryParams。所显示的页面将一直保留到下一个页面到达.

<DataTable pagination={{ server: true }} apiPath="/contacts" search … />

query 构建请求和 read 读取其它 API 的答案,此处为 Spring Data (单位:千美元)page 从0起, sort=name,asc, (中文(简体) ), content 财务报告和审定财务报表 totalElements:

<DataTable
  pagination={{
    server: {
      query: ({ page, size, sort, direction, search }) => ({ page: page - 1, size, sort: `${sort},${direction}`, q: search }),
      read: (body) => {
        const { content, totalElements } = body as { content: Contact[]; totalElements: number };
        return { items: content, total: totalElements };
      },
    },
  }}
  …
/>

A 类 SubTable 显示您装入的内容 : 通过此页面 records 以及它所处的位置 pagination。 。 。 .

const [page, setPage] = useState(1);
const { data } = useQuery({ queryKey: ["changes", page], queryFn: () => loadChanges(page, 50) });

<SubTable
  records={data?.items}
  pagination={{ page, totalRecords: data?.total ?? 0, recordsPerPage: 50, onPageChange: setPage }}
  …
/>;

你留着一页. page 财务报告和审定财务报表 onPageChange 将页面交给您, 将其保存在 URL 中, 或重置它从 外部;当排序、搜索或标签发生变化时,表格仍然移动到第1页.

<DataTable pagination={{ server: true, page: search.page, onPageChange: (page) => navigate({ search: { page } }) }} … />

列扩展

设定 rowExpansion 以一行显示内容。 第一栏增加了一分音符 自动; expandable 控制哪个行可以打开。 扩张本身就影响了其内容—— md 在桌面上,卡片本身在电话上被套入——所以内容不会带来自有的粘贴.

扩展行中的列表是 nested(单位:千美元) SubTable 当它的行已被装载时, a DataTable 何时 它根据自己的要求编辑。 然后,这两个部分都变成同一个部分——一个标题: title (命令4), 选项 description 和右边的动作,桌面上的一个边框表格和一面的有色卡 电话,列脚作为电话的最后一张卡片,以及暗淡的一行话(noRecordsText而不是一个 空位相会.

import { SubTable } from "@espresso-lab/mantine-data-table";

<DataTable<Account>
  title="Accounts"
  queryKey={["accounts"]}
  apiPath="/accounts"
  fields={fields}
  mobileCards
  rowExpansion={{
    expandable: (account) => account.entries.length > 0,
    content: (account, isMobile) => (
      <SubTable
        nested
        title="Buchungen"
        mobile={isMobile}
        records={account.entries}
        idAccessor="id"
        noRecordsText="Keine Buchungen"
        columns={[
          { accessor: "date", title: "Date", render: (e) => formatDate(e.date) },
          {
            accessor: "amount",
            title: "Amount",
            textAlign: "right",
            render: (e) => formatAmount(e.amount),
            footer: formatAmount(account.total),
          },
        ]}
      />
    ),
  }}
/>;

扩展行中一个单独编辑的列表——条目添加、更改和删除,使用 他们自己的要求是: DataTable 与 nested 因此,它带来了对话:

rowExpansion={{
  content: (tenancy) => (
    <DataTable<RentStep>
      nested
      title="Mietstaffelung"
      entityName="Mietstaffel"
      apiPath={`/tenancies/${tenancy.id}/rent-steps`}
      queryKey={["tenancies", tenancy.id, "rent-steps"]}
      fields={rentStepFields}
      mobileCards
    />
  ),
}}

SubTable 两种布局都使用一组列:桌面上完整的曼丁数据表(排序, 列过滤器,页脚总数)和移动上贴有标签的卡片列表。 添加 hideOnMobile: (record) => boolean 以跳出移动卡中的低值单元格。 过 rowActions={(record) => ({ name, onEdit, onDelete, actions })} 而不是构建动作列: 桌面获得相同的右对齐 RowActions 作为 DataTable,在桌边滚动时被钉住,每张牌上都打一个"Q"菜单. A 类 表格withTableBorder) 显示白色边框卡像 DataTable因为,a nested 一个 已下锡分卡.

许可证

麻省理工学院