Initial Development

README.md

@@ -25,7 +25,9 @@ npm i uuid @trautmann/react-headless-table
 ```
 
 Use it in your code:
+
 1. Wrap you table component into `ReactHeadlessTable` and provide it with necessary data
+
 ```js
 // table.js
 import { ReactHeadlessTable } from '@trautmann/react-headless-table';
@@ -37,14 +39,16 @@ export function Table(props) {
   return (
     <ReactHeadlessTable columns={columns} rows={rows}>
       <table>
-        <TableHead/>
-        <TableBody/>
+        <TableHead />
+        <TableBody />
       </table>
     </ReactHeadlessTable>
   );
 }
 ```
+
 2. Access data and functionality via hooks in child components
+
 ```js
 // table-head.js
 import { useColumns } from '@trautmann/react-headless-table';
@@ -54,14 +58,15 @@ export function TableHead() {
   return (
     <thead>
       <tr>
-        {columns.map(column => (
+        {columns.map((column) => (
           <td key={column.id}>{column.field}</td>
         ))}
       </tr>
     </thead>
   );
 }
 ```
+
 ```js
 // table-body.js
 import { useColumns, useRows } from '@trautmann/react-headless-table';
@@ -71,9 +76,9 @@ export function TableHead() {
   const { rows } = useRows();
   return (
     <tbody>
-      {rows.map(row => (
+      {rows.map((row) => (
         <tr key={row.id}>
-          {columns.map(column => (
+          {columns.map((column) => (
             <td key={column.id}>{row.data?.[column.field] ?? ''}</td>
           ))}
         </tr>
@@ -93,28 +98,34 @@ Want to [become a code contributor](https://react-headless-table.trautmann.softw
 
 ## Sponsor the project
 
-If you find this package useful, please consider ❤️[sponsoring my work](https://github.com/sponsors/Trautmann-Software). Your sponsorship will help me dedicate more time to maintaining the project and will encourage me to add new features and fix existing bugs.
+If you find this package useful, please consider sponsoring my work: [<img src="https://cdn.buymeacoffee.com/buttons/v2/default-blue.png" alt="Buy Me A Coffee" style="objectFit: contain; width: 217px;"/>](https://www.buymeacoffee.com/rashad2985).
+Your sponsorship will help me dedicate more time to maintaining the project and will encourage me to add new features and fix existing bugs.
 
 ## Other means of support
 
-If you find this package useful, please 🙏star the repository, 💕[tweet about it](http://twitter.com/share?text=Build%20data-rich%20React%20applications%20with%20%40trautmann%2Freact-headless-table&url=https%3A%2F%2Freact-headless-table.trautmann.software&hashtags=react%2Cdatatable%2Cheadless%2Chooks&via=trautmann_soft), 👍[endorse me on LinkedIn](https://www.linkedin.com/in/rashad2985), [subscribe to our linktree](https://linktr.ee/trautmann.software?subscribe) or consider hiring my services.
+If you find this package useful
+
+- please star the repository,
+- [tweet about it](http://twitter.com/share?text=Build%20data-rich%20React%20applications%20with%20%40trautmann%2Freact-headless-table&url=https%3A%2F%2Freact-headless-table.trautmann.software&hashtags=react%2Cdatatable%2Cheadless%2Chooks&via=trautmann_soft),
+- [endorse me on LinkedIn](https://www.linkedin.com/in/rashad2985)
+- or consider hiring my services.
 
 The more stars this repository gets, the more visibility it gains among the developers and users community. The more
 users it gets, the more chances that some of those users will become active code contributors willing to put
 their effort into bringing new features to life and/or fixing bugs.
 
-As the repository gain awareness, my chances of getting motivated to work on Mantine-based projects will increase,
+As the repository gain awareness, my chances of getting motivated to work on more open source projects like this will increase,
 which in turn will help maintain my vested interest in keeping the project alive.
 
 ## License
 
-The [MIT License](https://github.com/Trautmann-Software/react-headless-table/blob/main/LICENSE).
+The [MIT License][license-url].
 
 [npm-url]: https://www.npmjs.com/package/@trautmann/react-headless-table
 [repo-url]: https://github.com/Trautmann-Software/react-headless-table
 [stars-url]: https://github.com/Trautmann-Software/react-headless-table/stargazers
 [closed-issues-url]: https://github.com/Trautmann-Software/react-headless-table/issues?q=is%3Aissue+is%3Aclosed
-[license-url]: LICENSE
+[license-url]: https://github.com/Trautmann-Software/react-headless-table/blob/HEAD/LICENSE
 [npm-image]: https://img.shields.io/npm/v/@trautmann/react-headless-table.svg?style=flat-square
 [license-image]: http://img.shields.io/npm/l/@trautmann/react-headless-table.svg?style=flat-square
 [downloads-image]: http://img.shields.io/npm/dm/@trautmann/react-headless-table.svg?style=flat-square

docs/.gitignore

@@ -34,3 +34,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+/public/
+/.docgen/

docs/README.md

@@ -1,36 +1,7 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# React Headless Table documentation website
 
-## Getting Started
+This is the [React Headless Table](https://react-headless-table.trautmann.software) documentation website code.
 
-First, run the development server:
+The documentation website is statically built with [nextra](https://nextra.site/) and hosted on [GitHub Pages](https://pages.github.com/).
 
-```bash
-npm run dev
-# or
-yarn dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
-
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
-
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
-
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+Please refer to [the repository root README](https://github.com/Trautmann-Software/react-headless-table) for more information on the package itself.

docs/components/icons/index.ts

@@ -0,0 +1,8 @@
+import { SVGProps } from 'react';
+
+export type IconProps = Pick<SVGProps<SVGSVGElement>, 'width' | 'height'>;
+
+export * from './npm-icon';
+export * from './yarn-icon';
+export * from './js-icon';
+export * from './ts-icon';

docs/components/icons/js-icon.tsx

@@ -0,0 +1,11 @@
+import { memo } from 'react';
+import { IconProps } from './index';
+
+export const JsIcon = memo(({ width = 16, height = 16 }: IconProps) => (
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width={width} height={height} focusable="false">
+    <path
+      fill="#FFD600"
+      d="M3,3H21V21H3V3M7.73,18.04C8.13,18.89 8.92,19.59 10.27,19.59C11.77,19.59 12.8,18.79 12.8,17.04V11.26H11.1V17C11.1,17.86 10.75,18.08 10.2,18.08C9.62,18.08 9.38,17.68 9.11,17.21L7.73,18.04M13.71,17.86C14.21,18.84 15.22,19.59 16.8,19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,17.66 15.09,17.06L13.71,17.86Z"
+    ></path>
+  </svg>
+));

docs/components/icons/npm-icon.tsx

@@ -0,0 +1,16 @@
+import { memo } from 'react';
+import { IconProps } from './index';
+
+export const NpmIcon = memo(({ width = 16, height = 16 }: IconProps) => (
+  <svg
+    preserveAspectRatio="xMidYMid"
+    viewBox="0 0 256 256"
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    focusable="false"
+  >
+    <path d="M0 256V0h256v256z" fill="#C12127"></path>
+    <path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path>
+  </svg>
+));

docs/components/icons/ts-icon.tsx

@@ -0,0 +1,11 @@
+import { memo } from 'react';
+import { IconProps } from './index';
+
+export const TsIcon = memo(({ width = 16, height = 16 }: IconProps) => (
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width={width} height={height} focusable="false">
+    <path
+      fill="#007ACC"
+      d="M3,3H21V21H3V3M13.71,17.86C14.21,18.84 15.22,19.59 16.8,19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,17.66 15.09,17.06L13.71,17.86M13,11.25H8V12.75H9.5V20H11.25V12.75H13V11.25Z"
+    ></path>
+  </svg>
+));

docs/components/icons/yarn-icon.tsx

@@ -0,0 +1,22 @@
+import { memo } from 'react';
+import { IconProps } from './index';
+
+export const YarnIcon = memo(({ width = 16, height = 16 }: IconProps) => (
+  <svg
+    preserveAspectRatio="xMidYMid"
+    viewBox="0 0 256 256"
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    focusable="false"
+  >
+    <path
+      fill="#368FB9"
+      d="M128 0C57.328 0 0 57.328 0 128s57.328 128 128 128 128-57.328 128-128S198.672 0 128 0"
+    ></path>
+    <path
+      fill="#FFF"
+      d="M203.317 174.06c-7.907 1.878-11.91 3.608-21.695 9.983-15.271 9.884-31.976 14.48-31.976 14.48s-1.383 2.076-5.387 3.015c-6.918 1.68-32.963 3.114-35.335 3.163-6.376.05-10.28-1.63-11.367-4.25-3.311-7.907 4.744-11.367 4.744-11.367s-1.779-1.087-2.817-2.076c-.939-.939-1.927-2.816-2.224-2.125-1.235 3.015-1.878 10.379-5.189 13.69-4.547 4.596-13.146 3.064-18.236.395-5.585-2.965.395-9.933.395-9.933s-3.015 1.779-5.436-1.878c-2.175-3.36-4.2-9.094-3.657-16.16.593-8.056 9.587-15.865 9.587-15.865s-1.581-11.91 3.608-24.117c4.695-11.12 17.347-20.065 17.347-20.065s-10.626-11.762-6.672-22.338c2.57-6.92 3.608-6.87 4.448-7.166 2.965-1.137 5.831-2.373 7.957-4.695 10.625-11.466 24.166-9.292 24.166-9.292s6.425-19.52 12.356-15.715c1.828 1.186 8.401 15.814 8.401 15.814s7.018-4.102 7.809-2.57c4.25 8.254 4.744 24.019 2.866 33.607-3.163 15.814-11.07 24.315-14.233 29.652-.741 1.236 8.5 5.14 14.332 21.3 5.387 14.777.593 27.182 1.433 28.566.148.247.198.346.198.346s6.177.494 18.582-7.166c6.622-4.102 14.48-8.698 23.425-8.797 8.65-.149 9.094 9.983 2.57 11.564zm11.763-7.265c-.89-7.017-6.82-11.86-14.431-11.762-11.367.148-20.905 6.03-27.231 9.934-2.471 1.532-4.596 2.669-6.425 3.509.395-5.733.05-13.245-2.916-21.498-3.608-9.885-8.45-15.963-11.91-19.472 4.003-5.832 9.489-14.332 12.058-27.478 2.224-11.219 1.533-28.664-3.558-38.45-1.038-1.976-2.767-3.41-4.942-4.003-.89-.247-2.57-.741-5.881.198-4.991-10.329-6.721-11.416-8.056-12.306-2.767-1.779-6.029-2.174-9.093-1.038-4.102 1.483-7.61 5.437-10.922 12.454a51.47 51.47 0 00-1.334 3.015c-6.277.445-16.161 2.718-24.513 11.762-1.038 1.137-3.064 1.977-5.19 2.768h.05c-4.349 1.532-6.326 5.09-8.747 11.515-3.361 8.994.098 17.84 3.508 23.574-4.645 4.151-10.823 10.773-14.084 18.532-4.053 9.588-4.498 18.978-4.35 24.068-3.459 3.658-8.796 10.527-9.39 18.237-.79 10.773 3.114 18.088 4.844 20.756.494.791 1.038 1.434 1.63 2.076-.197 1.334-.246 2.768.05 4.25.643 3.46 2.817 6.277 6.128 8.056 6.524 3.46 15.617 4.942 22.635 1.433 2.52 2.669 7.117 5.239 15.469 5.239h.494c2.125 0 29.109-1.433 36.967-3.36 3.509-.841 5.93-2.324 7.512-3.658 5.04-1.582 18.977-6.326 32.123-14.826 9.291-6.03 12.504-7.315 19.423-8.995 6.72-1.63 10.922-7.759 10.082-14.53z"
+    ></path>
+  </svg>
+));

docs/components/index.ts

@@ -0,0 +1,4 @@
+export * from './icons';
+export * from './props-table';
+export * from './props-simulations';
+export * from './tab-item';

docs/components/mantine-table.tsx

@@ -0,0 +1,74 @@
+import { Mantine } from './mantine';
+import { Stack, Table, TextInput } from '@mantine/core';
+import { ReactNode } from 'react';
+import {
+  ReactHeadlessTable,
+  ReactHeadlessTableProps,
+  Row,
+  useColumns,
+  useRows,
+  useSearchQuery,
+} from '@trautmann/react-headless-table';
+import { IconSearch } from '@tabler/icons-react';
+
+export type CustomColumn<RowData extends Record<string, any> = {}> = {
+  title: string;
+  render?: (row: Row<RowData>) => ReactNode;
+};
+
+type Props<RowData extends Record<string, any> = {}> = Omit<
+  ReactHeadlessTableProps<RowData, CustomColumn<RowData>>,
+  'children'
+> & {
+  caption?: ReactNode;
+};
+
+export function MantineTable<RowData extends Record<string, any> = {}>({ caption, ...props }: Props<RowData>) {
+  return (
+    <ReactHeadlessTable {...props}>
+      <Mantine>
+        <MantineTableInner caption={caption} />
+      </Mantine>
+    </ReactHeadlessTable>
+  );
+}
+
+type InnerProps<RowData extends Record<string, any> = {}> = Pick<Props<RowData>, 'caption'>;
+function MantineTableInner<RowData extends Record<string, any> = {}>({ caption }: InnerProps) {
+  const { searchQuery, setSearchQuery } = useSearchQuery();
+  const { columns } = useColumns<RowData, CustomColumn<RowData>>();
+  const { rows } = useRows<RowData>();
+
+  return (
+    <Stack sx={{ marginTop: 8, marginBottom: 8 }}>
+      <TextInput
+        type="search"
+        placeholder="Search"
+        value={searchQuery}
+        onChange={(event) => setSearchQuery(event.currentTarget.value)}
+        icon={<IconSearch size={14} />}
+      />
+      <Table striped withBorder captionSide="bottom">
+        <thead>
+          <tr>
+            {columns.map((column) => (
+              <td key={column.id}>{column.title}</td>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row) => (
+            <tr key={row.id}>
+              {columns.map((column) => (
+                <td key={column.id} valign="top">
+                  {column.render ? column.render(row) : String(column.value(row) ?? '-')}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+        {caption && <caption style={{ textAlign: 'left' }}>{caption}</caption>}
+      </Table>
+    </Stack>
+  );
+}

docs/components/mantine.tsx

@@ -0,0 +1,16 @@
+import { MantineProvider } from '@mantine/core';
+import { PropsWithChildren } from 'react';
+import { useTheme } from 'nextra-theme-docs';
+
+export function Mantine({ children }: PropsWithChildren) {
+  const { resolvedTheme } = useTheme();
+  return (
+    <MantineProvider
+      withGlobalStyles
+      withNormalizeCSS
+      theme={{ colorScheme: resolvedTheme === 'light' ? 'light' : 'dark' }}
+    >
+      {children}
+    </MantineProvider>
+  );
+}

docs/components/props-simulations.tsx

@@ -0,0 +1,17 @@
+import { ReactHeadlessTableProps, UseSearchQuery } from '@trautmann/react-headless-table';
+import { Fragment } from 'react';
+
+export function ReactHeadlessTable<
+  RowData extends Record<string, any> = {},
+  CustomColumn extends Record<string, any> = {},
+  CustomOptions extends Record<string, any> = {},
+  CustomFilter extends Record<string, any> = {},
+>(props: ReactHeadlessTableProps<RowData, CustomColumn, CustomOptions, CustomFilter>) {
+  console.log(props);
+  return <Fragment />;
+}
+
+export function UseSearchQueryProps(props: UseSearchQuery) {
+  console.log(props);
+  return <Fragment />;
+}