Getting started

// Once, at your app's entry: the default look of all four components.
import "slotsmith/styles.css";

// Only the components you use. The table's sheet brings the autocomplete's rules
// with it, for its page-size menu.
import "slotsmith/data-table.css";
import "slotsmith/date-picker.css";

import type { ReactNode } from "react";
import { SlotsmithProvider } from "slotsmith/provider";
import { ar } from "slotsmith/locales/ar";
import { fr } from "slotsmith/locales/fr";

// Every slotsmith component inside reads its labels and number formats from
// the provider. English is the default, so it needs no pack.
export function Providers({ language, children }: { language: "en" | "ar" | "fr"; children: ReactNode }) {
  return (
    <SlotsmithProvider locale={language} locales={[ar, fr]}>
      {children}
    </SlotsmithProvider>
  );
}

import type { ReactNode } from "react";
import { SlotsmithProvider, type SlotsmithComponents } from "slotsmith/provider";
import { shadcnComponents as dataTable } from "../adapters/data-table/shadcn";
import { shadcnComponents as datePicker } from "../adapters/date-picker/shadcn";

// One map per component, each the same object that component's own
// `components` prop takes. Defined outside any component, so its identity
// never changes between renders.
const components: SlotsmithComponents = { dataTable, datePicker };

// Every data table and date picker inside renders with the adapter's parts.
export function Providers({ children }: { children: ReactNode }) {
  return <SlotsmithProvider components={components}>{children}</SlotsmithProvider>;
}

// CommonJS: require each component's own entry.
const { Autocomplete } = require("slotsmith/autocomplete");
const { DatePicker } = require("slotsmith/date-picker");
const { FileUploader } = require("slotsmith/file-uploader");
const { SlotsmithProvider } = require("slotsmith/provider");
const { ar } = require("slotsmith/locales/ar");

// The table's entries, and the main entry "slotsmith" (it holds the table
// too), also require @tanstack/react-table.
const { DataTable } = require("slotsmith/data-table");

"use client";

import { createContext, useContext, useState, type ReactNode } from "react";
import { SlotsmithProvider } from "slotsmith/provider";
import { ar } from "slotsmith/locales/ar";

export type Language = "en" | "ar";

const LanguageContext = createContext<{ language: Language; toggle: () => void }>({ language: "en", toggle: () => {} });

/** The client boundary: it holds the language and gives every slotsmith component below it the matching pack. */
export function Providers({ initialLanguage, children }: { initialLanguage: Language; children: ReactNode }) {
  const [language, setLanguage] = useState(initialLanguage);
  const toggle = () => {
    const next = language === "en" ? "ar" : "en";
    setLanguage(next);
    document.cookie = `lang=${next}; path=/; max-age=31536000`;
    document.documentElement.lang = next;
    document.documentElement.dir = next === "ar" ? "rtl" : "ltr";
  };
  return (
    <LanguageContext value={{ language, toggle }}>
      {/* English is the default, so it needs no pack. */}
      <SlotsmithProvider locale={language === "ar" ? "ar" : undefined} locales={[ar]}>
        {children}
      </SlotsmithProvider>
    </LanguageContext>
  );
}

/** A button that switches between English and Arabic. */
export function LanguageToggle() {
  const { language, toggle } = useContext(LanguageContext);
  return (
    <button type="button" onClick={toggle}>
      {language === "en" ? "العربية" : "English"}
    </button>
  );
}

import { DataTable, type DataTableColumnDef } from "slotsmith/data-table";
import { LanguageToggle } from "./providers";

type Book = { title: string; author: string; year: number };

const books: Book[] = [
  { title: "Things Fall Apart", author: "Chinua Achebe", year: 1958 },
  { title: "Season of Migration to the North", author: "Tayeb Salih", year: 1966 },
  { title: "Beloved", author: "Toni Morrison", year: 1987 },
];

// Plain objects, so this server component can pass them to the table.
const columns: DataTableColumnDef<Book>[] = [
  { accessorKey: "title", header: "Title" },
  { accessorKey: "author", header: "Author" },
  { accessorKey: "year", header: "Year" },
];

export default function Page() {
  return (
    <main>
      <LanguageToggle />
      <DataTable data={books} columns={columns} />
    </main>
  );
}

import { useEffect, useState } from "react";
import { DataTable, type DataTableColumnDef } from "slotsmith/data-table";
import { SlotsmithProvider } from "slotsmith/provider";
import { ar } from "slotsmith/locales/ar";

type Book = { title: string; author: string; year: number };

const books: Book[] = [
  { title: "Things Fall Apart", author: "Chinua Achebe", year: 1958 },
  { title: "Season of Migration to the North", author: "Tayeb Salih", year: 1966 },
  { title: "Beloved", author: "Toni Morrison", year: 1987 },
];

const columns: DataTableColumnDef<Book>[] = [
  { accessorKey: "title", header: "Title" },
  { accessorKey: "author", header: "Author" },
  { accessorKey: "year", header: "Year" },
];

export function App() {
  const [language, setLanguage] = useState<"en" | "ar">("en");

  // The page's lang and dir follow the language, so the table and the rest of the page mirror together.
  useEffect(() => {
    document.documentElement.lang = language;
    document.documentElement.dir = language === "ar" ? "rtl" : "ltr";
  }, [language]);

  return (
    // English is the default, so it needs no pack.
    <SlotsmithProvider locale={language === "ar" ? "ar" : undefined} locales={[ar]}>
      <button type="button" onClick={() => setLanguage(language === "en" ? "ar" : "en")}>
        {language === "en" ? "العربية" : "English"}
      </button>
      <DataTable data={books} columns={columns} />
    </SlotsmithProvider>
  );
}