AutoFitGrid (v1.0.3)

AutoFitGrid is a robust JavaScript library for creating dynamic, auto-fitting grid layouts. It supports multiple data types and customizable options for responsive designs.

Author: Hien Tran

NPM: https://www.npmjs.com/package/auto-fit-grid

GitHub Repository: Auto Fit Grid on GitHub

You can find more usage in the README.

Example 1: Standard Grid with Various Data Types
This example demonstrates a standard grid with columns of various data types including text, email, date, and number. The grid adjusts column widths dynamically based on content.
Company Name
Country
Email
Established Date
Revenue
OpenAI, Inc.
USA
contact@openai.com
2024-07-26
$100,000,000
VeryLongCompanyNameThatExceedsTypicalLengths, Ltd.
Canada
info@longcompanyname.ca
2023-05-12
$50,000,000
Medium Company
Germany
contact@mediumcompany.de
2018-11-15
$25,000,000
<div class="grid-container">
    <div class="grid-header" data-type="text" data-prioritize-spare-space="true">Company Name</div>
    <div class="grid-header" data-type="text">Country</div>
    <div class="grid-header" data-type="email">Email</div>
    <div class="grid-header" data-type="date">Established Date</div>
    <div class="grid-header" data-type="number">Revenue</div>

    <div class="grid-item">OpenAI, Inc.</div>
    <div class="grid-item">USA</div>
    <div class="grid-item">contact@openai.com</div>
    <div class="grid-item">2024-07-26</div>
    <div class="grid-item">$100,000,000</div>

    <div class="grid-item">VeryLongCompanyNameThatExceedsTypicalLengths, Ltd.</div>
    <div class="grid-item">Canada</div>
    <div class="grid-item">info@longcompanyname.ca</div>
    <div class="grid-item">2023-05-12</div>
    <div class="grid-item">$50,000,000</div>

    <div class="grid-item">Medium Company</div>
    <div class="grid-item">Germany</div>
    <div class="grid-item">contact@mediumcompany.de</div>
    <div class="grid-item">2018-11-15</div>
    <div class="grid-item">$25,000,000</div>
</div>
                
new AutoFitGrid({
    container: document.querySelector('.grid-container'),
    defaultMinWidth: 50,
    defaultMaxWidth: Infinity,
    adjustmentThreshold: 200,
    headerSelector: '.grid-header',
    columnSelector: '.grid-item',
    showDebug: true,
});
Example 2: Two Columns with Text and Email
This example showcases a grid with only two columns - Name and Email. It demonstrates how the grid adjusts for fewer columns.
Name
Email
John Doe
john.doe@example.com
Jane Smith
jane.smith@example.com
<div class="grid-container">
    <div class="grid-header" data-type="text">Name</div>
    <div class="grid-header" data-type="email">Email</div>

    <div class="grid-item">John Doe</div>
    <div class="grid-item">john.doe@example.com</div>

    <div class="grid-item">Jane Smith</div>
    <div class="grid-item">jane.smith@example.com</div>
</div>
                
new AutoFitGrid({
    container: document.querySelector('.grid-container'),
    defaultMinWidth: 50,
    defaultMaxWidth: Infinity,
    adjustmentThreshold: 200,
    headerSelector: '.grid-header',
    columnSelector: '.grid-item',
    showDebug: true,
    distributeRemainingSpace: false
});
Example 3: Three Columns with Product Information
This example includes three columns: Product, Price, and Release Date. It demonstrates handling of different data types including text, number, and date.
Product
Price
Release Date
SuperWidget
$99.99
2022-01-01
MegaWidget
$149.99
2023-03-15
<div class="grid-container">
    <div class="grid-header" data-type="text">Product</div>
    <div class="grid-header" data-type="number">Price</div>
    <div class="grid-header" data-type="date">Release Date</div>

    <div class="grid-item">SuperWidget</div>
    <div class="grid-item">$99.99</div>
    <div class="grid-item">2022-01-01</div>

    <div class="grid-item">MegaWidget</div>
    <div class="grid-item">$149.99</div>
    <div class="grid-item">2023-03-15</div>
</div>
                
new AutoFitGrid({
    container: document.querySelector('.grid-container'),
    defaultMinWidth: 50,
    defaultMaxWidth: Infinity,
    adjustmentThreshold: 200,
    headerSelector: '.grid-header',
    columnSelector: '.grid-item',
    showDebug: true,
});
Example 4: Four Columns with Personal Information
This grid contains four columns: First Name, Last Name, Email, and Age. It demonstrates handling personal information with different data types.
First Name
Last Name
Email
Age
Alice
Johnson
alice.johnson@example.com
30
Bob
Smith
bob.smith@example.com
25
<div class="grid-container">
    <div class="grid-header" data-type="text">First Name</div>
    <div class="grid-header" data-type="text">Last Name</div>
    <div class="grid-header" data-type="email">Email</div>
    <div class="grid-header" data-type="number">Age</div>

    <div class="grid-item">Alice</div>
    <div class="grid-item">Johnson</div>
    <div class="grid-item">alice.johnson@example.com</div>
    <div class="grid-item">30</div>

    <div class="grid-item">Bob</div>
    <div class="grid-item">Smith</div>
    <div class="grid-item">bob.smith@example.com</div>
    <div class="grid-item">25</div>
</div>
                
new AutoFitGrid({
    container: document.querySelector('.grid-container'),
    defaultMinWidth: 50,
    defaultMaxWidth: Infinity,
    adjustmentThreshold: 200,
    headerSelector: '.grid-header',
    columnSelector: '.grid-item',
    showDebug: true,
});
Example 5: Complex Data with Five Columns
This example includes five columns: Task, Assigned To, Contact Email, Due Date, and Priority. It demonstrates how the grid handles complex data with multiple columns.
Task
Assigned To
Contact Email
Due Date
Priority
Complete project documentation
Alice Johnson
alice.johnson@example.com
2024-08-01
1
Develop new feature X
Bob Smith
bob.smith@example.com
2024-07-30
2
<div class="grid-container">
    <div class="grid-header" data-type="text" data-wrap-ratio="8" data-prioritize-spare-space="true">Task</div>
    <div class="grid-header" data-type="text">Assigned To</div>
    <div class="grid-header" data-type="email">Contact Email</div>
    <div class="grid-header" data-type="date">Due Date</div>
    <div class="grid-header" data-type="number">Priority</div>

    <div class="grid-item">Complete project documentation</div>
    <div class="grid-item">Alice Johnson</div>
    <div class="grid-item">alice.johnson@example.com</div>
    <div class="grid-item">2024-08-01</div>
    <div class="grid-item">1</div>

    <div class="grid-item">Develop new feature X</div>
    <div class="grid-item">Bob Smith</div>
    <div class="grid-item">bob.smith@example.com</div>
    <div class="grid-item">2024-07-30</div>
    <div class="grid-item">2</div>
</div>
                
new AutoFitGrid({
    container: document.querySelector('.grid-container'),
    defaultMinWidth: 50,
    defaultMaxWidth: Infinity,
    adjustmentThreshold: 200,
    headerSelector: '.grid-header',
    columnSelector: '.grid-item',
    showDebug: true,
});
Example 6: Very Long Text Columns
This example includes columns with very long text to demonstrate how the grid handles extensive content and adjusts column widths accordingly.
Description
Details
Comments
This is a very long description text that exceeds typical lengths to test the grid layout handling. It should demonstrate how the grid can dynamically adjust the column widths based on the content.
Details about the very long description that continues to add more text for testing purposes. The grid should handle this gracefully and ensure proper wrapping or width adjustment.
Additional comments with a lot of text to further test the grid layout. This helps in verifying the robustness of the AutoFitGrid in handling diverse content lengths.
Another example of a very long description text to ensure the grid layout works as expected. It includes various sentences to make it long enough for testing.
Further details for the long description, adding more text to test the grid's dynamic adjustment capabilities.
Comments for the second example, ensuring that the grid layout remains consistent and properly adjusted for different content lengths.
<div class="grid-container">
    <div class="grid-header" data-type="text">Description</div>
    <div class="grid-header" data-type="text">Details</div>
    <div class="grid-header" data-type="text">Comments</div>

    <div class="grid-item">This is a very long description text that exceeds typical lengths to test the grid layout handling. It should demonstrate how the grid can dynamically adjust the column widths based on the content.</div>
    <div class="grid-item">Details about the very long description that continues to add more text for testing purposes. The grid should handle this gracefully and ensure proper wrapping or width adjustment.</div>
    <div class="grid-item">Additional comments with a lot of text to further test the grid layout. This helps in verifying the robustness of the AutoFitGrid in handling diverse content lengths.</div>

    <div class="grid-item">Another example of a very long description text to ensure the grid layout works as expected. It includes various sentences to make it long enough for testing.</div>
    <div class="grid-item">Further details for the long description, adding more text to test the grid's dynamic adjustment capabilities.</div>
    <div class="grid-item">Comments for the second example, ensuring that the grid layout remains consistent and properly adjusted for different content lengths.</div>
</div>
                
new AutoFitGrid({
    container: document.querySelector('.grid-container'),
    defaultMinWidth: 50,
    defaultMaxWidth: Infinity,
    adjustmentThreshold: 200,
    headerSelector: '.grid-header',
    columnSelector: '.grid-item',
    showDebug: true,
});
Example 7: All Data Types with Very Long Text
This example demonstrates a grid with all possible data types and includes columns with very long text to test the grid's handling of complex content. Debug logs are shown for this example.
Task Description
Assigned To
Email
Start Date
Due Date
Priority
Estimated Hours
Implement a very long description to test how the grid layout adjusts and handles different content lengths dynamically for each column.
Jane Doe
jane.doe@example.com
2024-01-15 08:30:00
2024-07-15 17:00:00
1
100
Another long description to verify the proper adjustment and wrapping of text within the grid cells for each column type.
John Smith
john.smith@example.com
2024-03-20 09:00:00
2024-09-20 16:00:00
2
150
<div class="grid-container">
    <div class="grid-header" data-type="text">Task Description</div>
    <div class="grid-header" data-type="text">Assigned To</div>
    <div class="grid-header" data-type="email">Email</div>
    <div class="grid-header" data-type="datetime">Start Date</div>
    <div class="grid-header" data-type="datetime">Due Date</div>
    <div class="grid-header" data-type="number">Priority</div>
    <div class="grid-header" data-type="number">Estimated Hours</div>

    <div class="grid-item">Implement a very long description to test how the grid layout adjusts and handles different content lengths dynamically for each column.</div>
    <div class="grid-item">Jane Doe</div>
    <div class="grid-item">jane.doe@example.com</div>
    <div class="grid-item">2024-01-15 08:30:00</div>
    <div class="grid-item">2024-07-15 17:00:00</div>
    <div class="grid-item">1</div>
    <div class="grid-item">100</div>

    <div class="grid-item">Another long description to verify the proper adjustment and wrapping of text within the grid cells for each column type.</div>
    <div class="grid-item">John Smith</div>
    <div class="grid-item">john.smith@example.com</div>
    <div class="grid-item">2024-03-20 09:00:00</div>
    <div class="grid-item">2024-09-20 16:00:00</div>
    <div class="grid-item">2</div>
    <div class="grid-item">150</div>
</div>
                
new AutoFitGrid({
    container: document.querySelector('.grid-container'),
    defaultMinWidth: 50,
    defaultMaxWidth: Infinity,
    adjustmentThreshold: 200,
    headerSelector: '.grid-header',
    columnSelector: '.grid-item',
    showDebug: true,
});
Example 8: Fixed Width Column
This example demonstrates a grid with a fixed-width column.
Fixed Width Column
Variable Width Column
Another Variable Width Column
Fixed width content
Variable width content that may be very long and should adjust accordingly
Additional variable width content
More fixed width content
Even longer variable width content to test the grid's dynamic adjustment capabilities
More additional variable width content
<div class="grid-container">
    <div class="grid-header" data-type="text" data-fixed-width="180">Fixed Width Column</div>
    <div class="grid-header" data-type="text">Variable Width Column</div>
    <div class="grid-header" data-type="text">Another Variable Width Column</div>

    <div class="grid-item">Fixed width content</div>
    <div class="grid-item">Variable width content that may be very long and should adjust accordingly</div>
    <div class="grid-item">Additional variable width content</div>

    <div class="grid-item">More fixed width content</div>
    <div class="grid-item">Even longer variable width content to test the grid's dynamic adjustment capabilities</div>
    <div class="grid-item">More additional variable width content</div>
</div>
                
new AutoFitGrid({
    container: document.querySelector('.grid-container'),
    defaultMinWidth: 50,
    defaultMaxWidth: Infinity,
    adjustmentThreshold: 200,
    headerSelector: '.grid-header',
    columnSelector: '.grid-item',
    showDebug: true,
});
Example 9: Grid with No Rows
This example demonstrates a grid with headers but no rows of data.
Employee Name
Department
Position
Hire Date
<div class="grid-container">
    <div class="grid-header" data-type="text">Employee Name</div>
    <div class="grid-header" data-type="text">Department</div>
    <div class="grid-header" data-type="text">Position</div>
    <div class="grid-header" data-type="date">Hire Date</div>
</div>
                
new AutoFitGrid({
    container: document.querySelector('.grid-container'),
    defaultMinWidth: 50,
    defaultMaxWidth: Infinity,
    headerSelector: '.grid-header',
    columnSelector: '.grid-item',
});
Example 10: Complex Headers
This example demonstrates a grid with various types of headers, including one-word headers, long text headers, and headers with mixed lengths.
ID
Name
Description of the Task and Responsibilities Involved
Assigned To
Start Date
Due Date
Priority
Estimated Hours
<div class="grid-container">
    <div class="grid-header" data-type="text">ID</div>
    <div class="grid-header" data-type="text">Name</div>
    <div class="grid-header" data-type="text">Description of the Task and Responsibilities Involved</div>
    <div class="grid-header" data-type="text">Assigned To</div>
    <div class="grid-header" data-type="date">Start Date</div>
    <div class="grid-header" data-type="date">Due Date</div>
    <div class="grid-header" data-type="number">Priority</div>
    <div class="grid-header" data-type="number">Estimated Hours</div>
</div>
                
new AutoFitGrid({
    container: document.querySelector('.grid-container'),
    defaultMinWidth: 50,
    defaultMaxWidth: Infinity,
    adjustmentThreshold: 200,
    headerSelector: '.grid-header',
    columnSelector: '.grid-item',
    showDebug: true,
});
Example 11: Grid with Various Data Types and Long Text
This example demonstrates a grid with various data types and long text columns, having 20 columns in total.
Company Name
Description
Employees
Founded
CEO
Contact Email
Last Updated
Headquarters
Industry
Mission Statement
Vision Statement
Core Values
Website
Revenue (in millions)
Market Cap
Products
Services
Partners
Social Media
Notes
OpenAI
OpenAI is an AI research and deployment company.
500
2015-12-11
Sam Altman
contact@openai.com
2024-07-01 12:00:00
San Francisco, CA
Artificial Intelligence
Our mission is to ensure that artificial general intelligence (AGI) benefits all of humanity.
We envision a world where AI helps solve complex global challenges.
Integrity, Collaboration, Impact
https://www.openai.com
100
1 Billion
GPT-3, DALL-E
AI Research, AI Deployment
Microsoft, GitHub
Twitter, LinkedIn
Leading AI innovations
ExampleCorp
ExampleCorp is a global example company providing example services and products worldwide.
1000
2000-01-01
Jane Doe
jane.doe@examplecorp.com
2024-06-01 08:30:00
New York, NY
Example Industry
To provide the best example services to our customers.
To lead the example industry with innovation and quality.
Excellence, Integrity, Customer Focus
https://www.examplecorp.com
500
2 Billion
ExampleProduct1, ExampleProduct2
ExampleService1, ExampleService2
Partner1, Partner2
Facebook, Instagram
Expanding globally
<div class="grid-container">
    <div class="grid-header" data-type="text">Company Name</div>
    <div class="grid-header" data-type="text">Description</div>
    <div class="grid-header" data-type="number">Employees</div>
    <div class="grid-header" data-type="date">Founded</div>
    <div class="grid-header" data-type="text">CEO</div>
    <div class="grid-header" data-type="email">Contact Email</div>
    <div class="grid-header" data-type="datetime">Last Updated</div>
    <div class="grid-header" data-type="text">Headquarters</div>
    <div class="grid-header" data-type="text">Industry</div>
    <div class="grid-header" data-type="text">Mission Statement</div>
    <div class="grid-header" data-type="text">Vision Statement</div>
    <div class="grid-header" data-type="text">Core Values</div>
    <div class="grid-header" data-type="text">Website</div>
    <div class="grid-header" data-type="number">Revenue (in millions)</div>
    <div class="grid-header" data-type="text">Market Cap</div>
    <div class="grid-header" data-type="text">Products</div>
    <div class="grid-header" data-type="text">Services</div>
    <div class="grid-header" data-type="text">Partners</div>
    <div class="grid-header" data-type="text">Social Media</div>
    <div class="grid-header" data-type="text">Notes</div>

    <div class="grid-item">OpenAI</div>
    <div class="grid-item">OpenAI is an AI research and deployment company.</div>
    <div class="grid-item">500</div>
    <div class="grid-item">2015-12-11</div>
    <div class="grid-item">Sam Altman</div>
    <div class="grid-item">contact@openai.com</div>
    <div class="grid-item">2024-07-01 12:00:00</div>
    <div class="grid-item">San Francisco, CA</div>
    <div class="grid-item">Artificial Intelligence</div>
    <div class="grid-item">Our mission is to ensure that artificial general intelligence (AGI) benefits all of humanity.</div>
    <div class="grid-item">We envision a world where AI helps solve complex global challenges.</div>
    <div class="grid-item">Integrity, Collaboration, Impact</div>
    <div class="grid-item">https://www.openai.com</div>
    <div class="grid-item">100</div>
    <div class="grid-item">1 Billion</div>
    <div class="grid-item">GPT-3, DALL-E</div>
    <div class="grid-item">AI Research, AI Deployment</div>
    <div class="grid-item">Microsoft, GitHub</div>
    <div class="grid-item">Twitter, LinkedIn</div>
    <div class="grid-item">Leading AI innovations</div>

    <div class="grid-item">ExampleCorp</div>
    <div class="grid-item">ExampleCorp is a global example company providing example services and products worldwide.</div>
    <div class="grid-item">1000</div>
    <div class="grid-item">2000-01-01</div>
    <div class="grid-item">Jane Doe</div>
    <div class="grid-item">jane.doe@examplecorp.com</div>
    <div class="grid-item">2024-06-01 08:30:00</div>
    <div class="grid-item">New York, NY</div>
    <div class="grid-item">Example Industry</div>
    <div class="grid-item">To provide the best example services to our customers.</div>
    <div class="grid-item">To lead the example industry with innovation and quality.</div>
    <div class="grid-item">Excellence, Integrity, Customer Focus</div>
    <div class="grid-item">https://www.examplecorp.com</div>
    <div class="grid-item">500</div>
    <div class="grid-item">2 Billion</div>
    <div class="grid-item">ExampleProduct1, ExampleProduct2</div>
    <div class="grid-item">ExampleService1, ExampleService2</div>
    <div class="grid-item">Partner1, Partner2</div>
    <div class="grid-item">Facebook, Instagram</div>
    <div class="grid-item">Expanding globally</div>
</div>
                
new AutoFitGrid({
    container: document.querySelector('.grid-container'),
    defaultMinWidth: 50,
    defaultMaxWidth: Infinity,
    adjustmentThreshold: 200,
    headerSelector: '.grid-header',
    columnSelector: '.grid-item',
    showDebug: true,
});
Example 12: Grid with Various Data Types and Long Text
This example demonstrates a grid with various data types and long text columns, having 12 columns in total (up to Vision Statement).
Company Name
Description
Employees
Founded
CEO
Contact Email
Last Updated
Headquarters
Industry
Mission Statement
OpenAI
OpenAI is an AI research and deployment company.
500
2015-12-11
Sam Altman
contact@openai.com
2024-07-01 12:00:00
San Francisco, CA
Artificial Intelligence
Our mission is to ensure that artificial general intelligence (AGI) benefits all of humanity.
ExampleCorp
ExampleCorp is a global example company providing example services and products worldwide.
1000
2000-01-01
Jane Doe
jane.doe@examplecorp.com
2024-06-01 08:30:00
New York, NY
Example Industry
To provide the best example services to our customers.
<div class="grid-container">
    <div class="grid-header" data-type="text">Company Name</div>
    <div class="grid-header" data-type="text">Description</div>
    <div class="grid-header" data-type="number">Employees</div>
    <div class="grid-header" data-type="date">Founded</div>
    <div class="grid-header" data-type="text">CEO</div>
    <div class="grid-header" data-type="email">Contact Email</div>
    <div class="grid-header" data-type="datetime">Last Updated</div>
    <div class="grid-header" data-type="text">Headquarters</div>
    <div class="grid-header" data-type="text">Industry</div>
    <div class="grid-header" data-type="text">Mission Statement</div>

    <div class="grid-item">OpenAI</div>
    <div class="grid-item">OpenAI is an AI research and deployment company.</div>
    <div class="grid-item">500</div>
    <div class="grid-item">2015-12-11</div>
    <div class="grid-item">Sam Altman</div>
    <div class="grid-item">contact@openai.com</div>
    <div class="grid-item">2024-07-01 12:00:00</div>
    <div class="grid-item">San Francisco, CA</div>
    <div class="grid-item">Artificial Intelligence</div>
    <div class="grid-item">Our mission is to ensure that artificial general intelligence (AGI) benefits all of humanity.</div>

    <div class="grid-item">ExampleCorp</div>
    <div class="grid-item">ExampleCorp is a global example company providing example services and products worldwide.</div>
    <div class="grid-item">1000</div>
    <div class="grid-item">2000-01-01</div>
    <div class="grid-item">Jane Doe</div>
    <div class="grid-item">jane.doe@examplecorp.com</div>
    <div class="grid-item">2024-06-01 08:30:00</div>
    <div class="grid-item">New York, NY</div>
    <div class="grid-item">Example Industry</div>
    <div class="grid-item">To provide the best example services to our customers.</div>
</div>
                
new AutoFitGrid({
    container: document.querySelector('.grid-container'),
    defaultMinWidth: 50,
    defaultMaxWidth: Infinity,
    adjustmentThreshold: 200,
    headerSelector: '.grid-header',
    columnSelector: '.grid-item',
    showDebug: true,
});
Example 13: With Checkbox Column and Fixed Width
This example demonstrates a grid with a checkbox column for selecting rows, using the data-fixed-width attribute.
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
<div class="grid-container" data-debug="true">
    <div class="grid-header checkbox-column" data-fixed-width="50">
        <input type="checkbox" id="select-all">
    </div>
    <div class="grid-header">#</div>
    <div class="grid-header">First</div>
    <div class="grid-header">Last</div>
    <div class="grid-header">Handle</div>

    <div class="grid-item checkbox-column">
        <input type="checkbox" class="select-row">
    </div>
    <div class="grid-item">1</div>
    <div class="grid-item">Mark</div>
    <div class="grid-item">Otto</div>
    <div class="grid-item">@mdo</div>

    <div class="grid-item checkbox-column">
        <input type="checkbox" class="select-row">
    </div>
    <div class="grid-item">2</div>
    <div class="grid-item">Jacob</div>
    <div class="grid-item">Thornton</div>
    <div class="grid-item">@fat</div>

    <div class="grid-item checkbox-column">
        <input type="checkbox" class="select-row">
    </div>
    <div class="grid-item">3</div>
    <div class="grid-item">Larry</div>
    <div class="grid-item">the Bird</div>
    <div class="grid-item">@twitter</div>
</div>
                
new AutoFitGrid({
    container: document.querySelector('.grid-container'),
    defaultMinWidth: 50,
    defaultMaxWidth: Infinity,
    adjustmentThreshold: 200,
    headerSelector: '.grid-header',
    columnSelector: '.grid-item',
    showDebug: true,
});

document.getElementById('select-all').addEventListener('change', function() {
    const checkboxes = document.querySelectorAll('.select-row');
    checkboxes.forEach(checkbox => {
        checkbox.checked = this.checked;
    });
});