ts-datagrid

Package to render DataGrid(Table)

Prerequisites

Before using ts-datagrid, ensure you have the following prerequisites:

• Node.js version 20 or higher
• React version 18 or higher

Installation

ts-datagrid

ts datagrid is available as an npm package.

npm:

npm i ts-datagrid

yarn:

yarn add ts-datagrid

Getting started with ts-datagrid

Example

// Import necessary components and types from libraries
import { GridColDef, GridValueGetterParams } from "@mui/x-data-grid";
import React, { useState } from "react";
import TsDatagrid from "ts-datagrid/dist/TsDatagrid";

// Define the main component
function App(props: any) {
  // Define state variables
  const [pageSize, setPageSize] = useState(5); // State for page size
  const pageSizeArray = [5, 10, 20, 30]; // Array of available page sizes

  // Test function
  const test = () => {
    return <div>hello</div>;
  };

  // Define columns for the data grid
  const columns: GridColDef[] = [
    { field: "id", headerName: "ID", width: 70 }, // Column for ID
    {
      field: "firstName",
      headerName: "First name",
      width: 130,
      // renderCell: test, // Custom rendering function for First name column (currently commented out)
    },
    { field: "lastName", headerName: "Last name", width: 130 }, // Column for Last name
    {
      field: "age",
      headerName: "Age",
      type: "number",
      width: 130,
      headerAlign: "center",
      align: "center",
    }, // Column for Age
    {
      field: "fullName",
      headerName: "Full name",
      description: "This column has a value getter and is not sortable.",
      sortable: false,
      width: 160,
      // Value getter for Full name column
      valueGetter: (params: GridValueGetterParams) =>
        `${params.row.firstName || ""} ${params.row.lastName || ""}`,
    },
  ];

  // Define rows for the data grid
  const rows = [
    { id: 1, lastName: "Smith", firstName: "John", age: 26 },
    { id: 2, lastName: "Johnson", firstName: "Michael", age: 42 },
    { id: 3, lastName: "Williams", firstName: "David", age: 45 },
    { id: 4, lastName: "Brown", firstName: "James", age: 16 },
    { id: 5, lastName: "Jones", firstName: "Robert", age: 23 },
    { id: 6, lastName: "Miller", firstName: "David", age: 150 },
    { id: 7, lastName: "Davis", firstName: "Mark", age: 44 },
    { id: 8, lastName: "Garcia", firstName: "William", age: 36 },
    { id: 9, lastName: "Rodriguez", firstName: "Joseph", age: 65 },
  ];

  // Function to handle row selection
  const onRowsSelectionHandler = (ids) => {
    const selectedRowsData = ids.map((id) => rows.find((row) => row.id === id));
    console.log(selectedRowsData);
  };

  // Function to handle page size change
  const handlePageSizeChange = (e) => {
    setPageSize(e);
  };

  // Function to handle page change
  const handlePageChange = (e) => {
    console.log(e);
  };

  // Render the component
  return (
    <div style={{ height: 400 }}>
      {/* Render the TsDatagrid component */}
      <TsDatagrid
        rows={rows}
        columns={columns}
        defaultPageSize={pageSize}
        pageSizeArray={pageSizeArray}
        getSelectedRowsData={onRowsSelectionHandler}
        handlePageSizeChange={handlePageSizeChange}
        handlePageChange={handlePageChange}
      />
    </div>
  );
}

// Export the component
export default App;

features

The package provides an option to adjust the columns dynamically, allowing users to customize the display of tabular data according to their preferences.

The package features a filter option that enables users to select a column, specify an operator, and provide a value for comparison, facilitating precise data filtering based on user-defined criteria.

The package offers a density option, providing users with the choice between compact, standard, and comfortable settings to adjust the number of data entries displayed in the table, allowing for a customizable viewing experience tailored to individual preferences.

Customization

• Data Display: Customize how data is presented with options for pagination or scrolling. Users can opt for organizing data into pages for convenient navigation or providing a continuous scrolling experience, depending on their data presentation needs.

Props Schema

The ts-datagrid component accepts the following props:

• rows: An array containing the data rows to be displayed in the table.
• columns: An array of GridColDef objects representing the columns configuration for the table.
• pageSize (optional): The number of rows to display per page.
• totalElements (optional): The total number of elements in the dataset.
• pageSizeArray (optional): An array containing the available page size options.
• getSelectedRowsData (optional): A callback function that receives the selected row data when rows are selected.
• handlePageSizeChange (optional): A callback function to handle changes in the page size.
• handlePageChange (optional): A callback function to handle changes in the current page.
• isCheckboxSelection (optional): A boolean indicating whether checkbox selection is enabled.

Note: When pagination is used, the following props become compulsory:

• handlePageSizeChange: Callback function to handle changes in the page size.
• handlePageChange: Callback function to handle changes in the current page.
• pageSize: The number of rows to display per page.
• totalElements: The total number of elements in the dataset.
• pageSizeArray: An array containing the available page size options.

Ensure to pass these props when implementing pagination functionality with the ts-datagrid component.

Note: You can also pass other props realted to MUI X Data Grid like:

• components To enable the toolbar with options like hiding columns, filtering, adjusting table density, and exporting the table as a file in your data grid component, import GridToolbar from @mui/x-data-grid:

import { GridToolbar } from "@mui/x-data-grid";

<TsDatagrid components={{ Toolbar: GridToolbar }} />;

//This will add the toolbar to your data grid component with various useful options for managing the table.

• density To fix the density of the table directly, you can simply pass the density prop to the TsDatagrid component. For example, to set the density to "compact", you would write:

<TsDatagrid density="compact" />

To control the visibility of the footer and footer pagination in the data grid component, you can use the hideFooter and hideFooterPagination props respectively.

• hideFooter: will hide the entire footer section, and setting
• hideFooterPagination: will hide only the pagination controls within the footer. You can adjust these props based on your specific requirements.

<TsDatagrid
  rows={rows}
  columns={columns}
  // getSelectedRowsData={onRowsSelectionHandler}
  // defaultPageSize={pageSize}
  // pageSizeArray={pageSizeArray}
  // handlePageSizeChange={handlePageSizeChange}
  // handlePageChange={handlePageChange}
  hidegFooter
  hideFooterPagination
/>

If you want to render a plain table without pagination, you don't need to pass defaultPageSize, pageSizeArray, handlePageSizeChange, handlePageChange and getSelectedRowsData. Instead, you must pass hideFooter and hideFooterPagination.

• sx
• className

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.