Comparison

Components covered

Data table, autocomplete (a select or a combobox), date picker and file uploader.

docs

Styling model

Optional stylesheets, one for everything or one per component, that read --ss-* CSS custom properties. Without a stylesheet the parts are plain HTML with stable class names, styled by your CSS, Tailwind or design system.

docs

How you replace a part

Each component is made of named slots; its components prop takes your component for any of them. Slots you leave alone keep their fallbacks.

docs

Built on

React. The data table uses TanStack Table 9; slotsmith has no dependencies of its own.

docs

Required dependencies and peers

Peers: react >=18, react-dom >=18. Optional peers: @tanstack/react-table ^9.2.0, @tanstack/react-virtual ^3.10.0. No dependencies.

docs

License

ISC

docs

RTL support

The stylesheets use CSS logical properties, so components mirror inside dir="rtl". 6 of the 18 locale packs are right-to-left: ar, ar-EG, ar-IQ, ar-SA, fa, he.

docs 1docs 2

Virtualisation

VirtualDataTable, VirtualAutocomplete and VirtualFileUploader from slotsmith/virtual render only the rows or options in view. They need @tanstack/react-virtual.

docs

TypeScript

Written in TypeScript; the package ships its type declarations.

docs

Wrong? Open an issue

Components covered

Data table only; the README describes no standalone combobox, date picker or file uploader.

source

Styling model

Styled by Material UI. It follows the app's Material UI theme; the docs recommend the sx prop, passed through the mui…Props options, for styling its parts.

source

How you replace a part

mui…Props options pass props to the Material UI components inside the table. renderTopToolbar and renderBottomToolbar replace the toolbars, and MRT_ sub-components such as MRT_TableContainer can be arranged in your own layout.

source 1source 2

Built on

Material UI V6 and TanStack Table V8, as its README states.

source

Required dependencies and peers

Peers: @mui/material >=6, @mui/icons-material >=6, @mui/x-date-pickers >=7.15, @emotion/react >=11.13, @emotion/styled >=11.13, react >=18.0, react-dom >=18.0. Dependencies: @tanstack/react-table, @tanstack/react-virtual, @tanstack/match-sorter-utils, highlight-words.

source

License

MIT

source

RTL support

The column resizing guide documents columnResizeDirection: "rtl" for right-to-left tables, set automatically from the Material UI theme's direction. The localization guide lists ar, fa and he among the included locales and does not mention RTL.

source 1source 2

Virtualisation

Row and column virtualisation, turned on with enableRowVirtualization and enableColumnVirtualization, using @tanstack/react-virtual.

source

TypeScript

Its README lists "Advanced TypeScript Generics Support (TypeScript Optional)".

source

Wrong? Open an issue

Components covered

Data table only; the README describes no standalone combobox, date picker or file uploader.

source

Styling model

Styled by Mantine. It follows the app's Mantine theme; parts are restyled with its CSS variables, the mrt- and mantine- class names, or style on the mantine…Props options. The install guide has you import mantine-react-table/styles.css.

source 1source 2

How you replace a part

mantine…Props options pass props to the Mantine components inside the table. renderTopToolbar and renderBottomToolbar replace the toolbars, and MRT_ sub-components such as MRT_TableContainer can be arranged in your own layout.

source 1source 2

Built on

Mantine V7 and TanStack Table V8, as its README states.

source

Required dependencies and peers

Peers: @mantine/core ^7.17.7, @mantine/dates ^7.17.7, @mantine/hooks ^7.17.7, @tabler/icons-react >=2.23.0, clsx >=2, dayjs >=1.11, react >=18.0, react-dom >=18.0. Dependencies: @tanstack/react-table, @tanstack/react-virtual, @tanstack/match-sorter-utils.

The same branch's README still lists Mantine V6 and @emotion/react in its install step. The package.json is used here.

source 1source 2

License

MIT

source

RTL support

The column resizing guide documents columnResizeDirection: "rtl" for right-to-left tables. The localization guide lists ar, fa and he among the included locales and does not mention RTL.

source 1source 2

Virtualisation

Row and column virtualisation, turned on with enableRowVirtualization and enableColumnVirtualization, using @tanstack/react-virtual.

source

TypeScript

Its README lists "Advanced TypeScript Generics Support (TypeScript Optional)".

source

Wrong? Open an issue

Components covered

The guide covers a data table. shadcn/ui's component list also has Combobox and Date Picker; it has no file uploader entry, and the Input page shows <Input type="file" />.

source 1source 2source 3

Styling model

Tailwind CSS classes in component source that lives in your project. The manual install says "Components are styled using Tailwind CSS."

source

How you replace a part

You edit the code. The guide has you build the DataTable component yourself from TanStack Table and the <Table /> parts, so every element is in your own file.

source

Built on

TanStack Table and the shadcn/ui <Table /> component. The guide says it uses TanStack Table v9.

source

Required dependencies and peers

The guide's install step adds the table component with the shadcn CLI and installs @tanstack/react-table. shadcn/ui's manual install requires Tailwind CSS.

source 1source 2

License

MIT

source

RTL support

The guide links to shadcn/ui's RTL guide: with rtl: true in components.json, the CLI rewrites physical classes as logical ones. That guide says the automatic rewrite is for projects created with shadcn create and the new styles, and that Calendar, Pagination and Sidebar need manual migration.

source 1source 2

Virtualisation

Not documented. The guide does not mention virtualisation.

source

TypeScript

The guide's code is TypeScript. shadcn/ui states that its components are written in TypeScript and that a JavaScript version is available through the CLI.

source 1source 2

Wrong? Open an issue

Components covered

Table, ComboBox and DatePicker. For files it has DropZone and FileTrigger; their pages do not describe an upload queue or upload progress.

source 1source 2source 3source 4source 5

Styling model

No styles by default. Each component has a default class name, react-aria-ComponentName, and data attributes for its states; className and style also accept functions of the state.

source

How you replace a part

Components are composed from child components that you arrange. The render prop swaps a component's DOM element, each component exports a context for building custom children with useContextProps, and a hook-based API sits underneath.

source

Built on

The react-aria and react-stately packages, which its package.json lists as dependencies.

source

Required dependencies and peers

Peers: react and react-dom, each ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1. Dependencies include react-aria, react-stately and @internationalized/date.

source

License

Apache-2.0

source

RTL support

The docs state that it "supports right-to-left interactions (e.g. keyboard navigation)" and includes localized strings for 30+ languages.

source

Virtualisation

A Virtualizer component renders only the visible items of a ListBox, GridList or Table, with list, grid, waterfall and table layouts.

source

TypeScript

The package ships type declarations: its package.json has a types entry.

source

Wrong? Open an issue

Components covered

Ark UI has Combobox, Date Picker and File Upload; its component list has no table. Park UI lists a Table, described as "A component for displaying data in rows and columns", plus Combobox, Date Picker (marked WIP) and File Upload.

source 1source 2source 3source 4source 5

Styling model

Ark UI is headless: parts carry data-scope, data-part and data-state attributes and take className; its styling guide covers CSS, Panda CSS and Tailwind CSS. Park UI is a styled layer built with Panda CSS.

source 1source 2

How you replace a part

Components are composed from parts such as Root, Trigger and Item. The asChild prop renders your own element or component in place of a part's default element. Park UI's CLI adds component source to your project.

source 1source 2

Built on

Ark UI: Zag.js state machines, for React, Solid, Vue and Svelte. Park UI: Ark UI and Panda CSS.

source 1source 2

Required dependencies and peers

@ark-ui/react peers: react >=18.0.0, react-dom >=18.0.0. Its dependencies are @zag-js/* packages and @internationalized/date. Park UI's install guide asks for a Panda CSS project, @ark-ui/react and lucide-react.

source 1source 2

License

MIT, for both.

source 1source 2

RTL support

Ark UI's README lists "RTL support" under its built-in accessibility. Its LocaleProvider is described as setting "the locale and direction of the app", and useLocaleContext returns locale and dir. Park UI: Not documented. Its docs navigation has no RTL page.

source 1source 2source 3

Virtualisation

Ark UI has no table component. Its Combobox page has a virtualised example that uses @tanstack/virtual. Park UI: Not documented on its Table page.

source 1source 2

TypeScript

Ark UI's README says "Fully typed with TypeScript". Park UI's component source is TypeScript: its Table page shows it with exported prop types.

source 1source 2

Wrong? Open an issue