open-index/open-npm huggingface dataset:
npm package: @liferay/npm-bundler-preset-liferay-dev
Description: Default configuration for liferay-npm-bundler inside liferay-portal.
Author: Liferay Frontend Infrastructure Team
Latest version: 4.7.0

# @liferay/npm-bundler-preset-liferay-dev

> Liferay npm Bundler preset for npm modules inside liferay-portal.

## Install

```sh
npm install --save-dev @liferay/npm-bundler-preset-liferay-dev
```

## Usage

Add the following to your `.npmbundlerrc` file:

```json
{
	"preset": "@liferay/npm-bundler-preset-liferay-dev"
}
```

## Technical Details

This preset includes the following Babel presets:

1. [babel-preset-liferay-standard](https://github.com/izaera/liferay-npm-build-tools/tree/master/packages/babel-preset-liferay-standard)

And the following Liferay NPM Bundler plugins:

1. [liferay-npm-bundler-plugin-replace-browser-modules](https://github.com/izaera/liferay-npm-build-tools/tree/master/packages/liferay-npm-bundler-plugin-replace-browser-modules)
npm package: @lifespikes/js-beam
Description: Opinionated JS bootstrap package for LifeSpikes projects
Latest version: 0.8.34

# JS Beam

Collection of JS/TS utilities for developing apps with the LifeSpikes
Beam stack.

Currently, it features just a helper for initializing InertiaJS.

**This is a read-only repository. Please send all PRs to the
`lifespikes/lifespikes` monorepo for review.**
npm package: @lifespikes/js-beam-vite
Description: Server-side utility for Vite using JS Beam
Latest version: 0.8.34

# JS Beam Vite

Utility for simple Vite bundler/dev server setups for JS projects
using the LifeSpikes Beam stack.

**This is a read-only repository. Please send all PRs to the
`lifespikes/lifespikes` monorepo for review.**
npm package: @lifespikes/next-datatable
Description: Datatable made with Shadcn, which can support server-side pagination and can synchronize its state with the url
Author: santigp258
Latest version: 1.10.0

# next-datatable

`next-datatable` is a library created using Shadcn, react-table, and nuqs. 
The goal is to provide a data table with the ability to have a simple API 
thanks to the support of [react-table](https://tanstack.com/table/latest),
a user-friendly interface using [Shadcn](https://ui.shadcn.com/), 
and the capability to automatically save its state in the
URL with [nuqs](https://nuqs.47ng.com/).

# Usage

Let's define some columns

```tsx
import { ColumnDef } from '@tanstack/react-table';


export const columns: ColumnDef<any>[] = [
  {
    id: 'select',
    header: ({ table }) => (
      <CheckboxPrimitive
        checked={table.getIsAllPageRowsSelected()}
        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
        aria-label="Select all"
      />
    ),
    cell: ({ row }) => (
      <CheckboxPrimitive
        className="border-gray-400 data-[state=checked]:border-white"
        checked={row.getIsSelected()}
        onCheckedChange={(value) => row.toggleSelected(!!value)}
        aria-label="Select row"
      />
    ),
    enableSorting: false,
    enableHiding: false
  },
  {
    accessorKey: 'name',
    header: 'Name',
    cell: ({ row }) => (
      <div className="flex space-x-2 text-primary">
        <File className="h-4 w-4" />
        <span>{row.getValue('name')}</span>
      </div>
    )
  },
  {
    accessorKey: 'status',
    header: 'Status'
  },
  {
    id: 'actions',
    enableHiding: false,
    cell: ({ row }) => {
      return (
        <Button size="icon">
          <DownloadCloud className="h-4 w-4" />
        </Button>
      );
    }
  }
];
```

And let's use our datatable as follows

```tsx
import { NextDataTable } from '@lifespikes/next-datatable';

const UsersTable = () => {
  const { data } = useGetUsers(); // Fetching data.


  return <NextDataTable data={data} columns={columns} />;
};
```

## How can I use the pagination values to make a query?

You need to use the hook `useGetNextTableState`. For example:

```tsx
import { NextDataTable, useGetNextTableState } from '@lifespikes/next-datatable';

const UsersTable = () => {

  const { pagination } = useGetNextTableState(); // get state from url

  const { data } = useGetUsers({
    page: pagination.pageIndex + 1,
    perPage: pagination.pageSize
  }); // Fetching data.


  return (
    <NextDataTable
      data={data}
      pageCount={data?.totalPages}
      defaultValues={{
        pagination: {
          pageIndex: data?.page - 1,
          pageSize: 10
        }
      }}
      columns={columns}
    />
  );
};
```

Check this [example app](https://github.com/lifespikes/packages/blob/main/apps/frontend/app/next-datatable-example.tsx)

## Example Video

https://github.com/lifespikes/packages/assets/67383906/7e2f5902-61e0-4676-af2e-7215d139abd8