material-svelte-table v0.0.1

Material React Table

About

This project is still in alpha

• A fully featured Material UI V5 implementation of Tanstack Svelte Table V8
• Written from the ground up in TypeScript
• All internal Svelte Material UI components are easily customizable

Join the Discord server to join in on the development discussion or ask questions

Features (All Features work and are MVP, but are still being polished)

All features can easily be enabled/disabled

• [] < 35kb gzipped - Bundlephobia
• [] Advanced TypeScript Generics Support (TypeScript Optional)
• [] Click To Copy Cell Values
• [] Column Actions
• [] Column Grouping (Group By and Aggregates)
• [] Column Hiding
• [] Column Ordering via Drag'n'Drop
• [] Column Pinning
• [] Column Resizing (work in progress)
• [] Customize Icons
• [] Customize Styling of internal Mui Components
• [] Data Editing (3 different editing modes)
• [] Density Toggle
• [] Detail Panels
• [] Filtering and multiple built-in filter modes
• [] Full Screen mode
• [] Global Filtering (Search across all columns, rank by best match)
• [] Header Groups & Footers
• [] Localization (i18n) support
• [] Manage your own state
• [] Pagination (supports client-side and server-side)
• [] Remote/Server-side sorting and filtering supported
• [] Row Actions
• [] Row Numbers
• [] Row Selection (checkboxes)
• [] SSR compatible
• [] Sorting
• [] Theming (Respects your Material UI Theme)
• [] Toolbars (Add your own action buttons)
• [] Tree Data / Expanding Sub-rows
• [] Virtualization (svete-virtual)

Getting Started

Installation

1. Install Peer Dependencies (Material UI V5)

TODO

2. Install material-svelte-table

npm install material-svelte-table

@tanstack/svelte-table, @tanstack/svelte-virtual, and @tanstack/match-sorter-utils are internal dependencies, so you don't need to install them yourself.

<!--

Usage

Read the full usage docs here

import React, { useMemo } from 'react';
import MaterialReactTable from 'material-svelte-table';

export default function App() {
  const columns = useMemo(
    () => [
      {
        accessorKey: 'name', //simple recommended way to define a column
        header: 'Name',
        muiTableHeadCellProps: { sx: { color: 'green' } }, //custom props
      },
      {
        accessorFn: (row) => row.age, //alternate way
        id: 'age', //id required if you use accessorFn instead of accessorKey
        header: 'Age',
        Header: <i style={{ color: 'red' }}>Age</i>, //optional custom markup
      },
    ],
    [],
  );

  //simple data example
  //Check out https://www.material-svelte-table.com/docs/examples/remote for a more realistic example
  const data = useMemo(
    () => [
      {
        name: 'John',
        age: 30,
      },
      {
        name: 'Sara',
        age: 25,
      },
    ],
    [],
  );

  return (
    <MaterialReactTable 
      columns={columns} 
      data={data} 
      enableColumnOrdering //enable some features
      enableRowSelection 
      enableStickyHeader
   />
   );
}

Open in Code Sandbox

--- -->

Contributors

PRs are Welcome, but please discuss in GitHub Discussions or the Discord Server first!